如果你去http://www.baycrest.org/b2btest/index2.html 當向下滾動時,我希望徽標收縮並適應白色條。這是用Javascript完成的嗎?或者只是純粹的CSS?如果你知道任何模板,那也會有很大的幫助。謝謝如何縮小向下滾動時的標誌大小?
0
A
回答
1
你可以使用css transitions和javascript/jquery來實現效果。在滾動事件中添加一個新類到標題並添加樣式以使徽標縮小。例如一個演示片段。
$(document).on("scroll", function(){
\t \t if
($(document).scrollTop() > 50){
\t \t $("header").addClass("shrink");
\t \t }
\t \t else
\t \t {
\t \t \t $("header").removeClass("shrink");
\t \t }
\t });
*{
margin:0px;
padding:0px;
}
.header{
padding:20px;
top: 0;
position: fixed;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out ;
transition:all 0.5s ease-in-out ;
z-index:999;
background:#FFF;
width:100%;
border-bottom:1px solid #ddd;
}
.header img{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out ;
transition:all 0.5s ease-in-out ;
width:75px;
height:75px;
}
.shrink{
padding:10px;
}
.shrink img{
width:50px;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<img src="http://via.placeholder.com/350x150" title="logo">
</header>
<div class="container">
<p><strong>Scroll down</strong></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
0
您可以使用JQuery的滾動事件從頂部獲取滾動的位置。基於此,您可以將不同的CSS類應用於徽標並動態更改其大小。
$(window).on('scroll',function(event){
console.log(event);
});
更多here。
很好地處理滾動事件頁面標題的另一個很酷的庫是Headroom.js。你應該檢查一下。
相關問題
- 1. 調整大小時NSScrollView向下滾動?
- 2. 如何更改標誌大小和隱藏某些Div向下滾動
- 3. 如何縮小導航菜單時向下滾動?
- 4. iframe放大和縮小鼠標滾動
- 5. 按大小和時間滾動日誌
- 6. 基於滾動的標題縮小大小
- 7. 在jquery中滾動時縮小標題
- 8. 標誌將改變時,向下滾動
- 9. 調整JFrame的大小,同時縮小滾動條依據
- 10. 側欄在縮小時向下移動
- 11. Cytoscape如何縮小動畫節點時放大縮小?
- 12. 在gmap上移動鼠標滾輪時避免放大/縮小
- 13. 滾動時更改標題大小
- 14. 滾動時調整徽標大小
- 15. 如何減小滾動條大小thumbnailize
- 16. 如何動態縮小和縮小圖像大小?
- 17. 如何讓QDockWidget不縮小QFrame標誌?
- 18. 當視圖大小發生變化時,ScrollView向下滾動
- 19. 在文件大小和時間上滾動回滾日誌
- 20. 設置滾動條縮略大小
- 21. Android滾動查看擴大和縮小
- 22. Wordpress調整圖像大小時如何縮小文件大小?
- 23. 在向下滾動或向上滾動時重新調整大小的徽標 - jQuery
- 24. 如何在iPhone上滾動和放大/縮小大圖像?
- 25. 如何在向下滾動時對角減小框尺寸
- 26. IE將圖標大小縮小圖標
- 27. 如何更改CScrollBar的滾動框(縮略圖)的大小?
- 28. 如何在1000px下調整大小時水平滾動窗口
- 29. 如何在頁面上向下滾動時調整圖像大小?
- 30. 固定格沒有滾動縮小窗口大小的形式
哇非常感謝XYZ。它的工作,我只是有一個問題,如果我想讓徽標在白色酒吧內縮小,當有人在他們的智能手機上看它時呢? – Jeff
@Jeff使用CSS媒體查詢,並設置日誌的大小在手機屏幕的寬度較小。所以當用戶打開它時,頭部會變小。 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries – XYZ
哇,這太令人難以置信了。我使用媒體查詢,它工作。我認爲這是一些JavaScript功能,但有了你的幫助,你真的讓我的一天和救了我。非常感謝你XYZ ......太棒了 – Jeff