實現滾動到一定位置時，導航欄置頂的效果
阿新 • • 發佈：2019-01-06
html部分:
<body> <h1>標題1</h1> <h1>標題2</h1> <h1>標題1</h1> <h1>標題2</h1> <div class="banner"> <ul> <li><a href="#">標題1</a></li> <li><a href="#">標題1</a></li> <li><a href="#">標題1</a></li> <li><a href="#">標題1</a></li> <li><a href="#">標題1</a></li> </ul> </div> <img src="1.jpg"> </body>
css部分：
<style> html,body{ width:100%; } .banner{ width:100%; height:50px; background:pink; } .banner ul li{ list-style:none; display:inline-block; margin-right:100px; line-height:50px; } a{ color:gray; text-decoration:none; } //下面這個類為動態新增的類 .fixDiv{ position:fixed; top:0; left:0; } </style>
js部分：
<script> $(function(){ var banOffTop=$(".banner").offset().top;//獲取到距離頂部的垂直距離 var scTop=0;//初始化垂直滾動的距離 $(document).scroll(function(){ scTop=$(this).scrollTop();//獲取到滾動條拉動的距離 //console.log(scTop);檢視滾動時，垂直方向上，滾動條滾動的距離 if(scTop>=banOffTop){ //核心部分：當滾動條拉動的距離大於等於導航欄距離頂部的距離時，新增指定的樣式 $(".banner").addClass("fixDiv"); }else{ $(".banner").removeClass("fixDiv"); } }) }) </script>
結果：
（1）初始樣式：
（2）當滾動到頂部時，導航欄固定在頂部：
