html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...
1.瀏覽器向下滾動到一定位置繼續滾動時,側邊導航固定在頁面頂部,再滾動到一定位置時頁面再向下滾動側邊導航不再固定。頁面向上滾動到一定位置繼續滾動時,側邊導航保持在原來位置。這種效果怎么實現呢
2.、
參考代碼:
$(function(){
//獲取要定位元素距離瀏覽器頂部的距離
var navH = $(".search_box").offset().top;
//滾動條事件
$(window).scroll(function(){
//獲取滾動條的滑動距離
var scroH = $(this).scrollTop();
//滾動條的滑動距離大于等于定位元素距離瀏覽器頂部的距離,就固定
if(scroH>=navH){
$(".search_box").css({position: 'fixed',top:0});
}
else if(scroH
$(".search_box").css({position: "static"}); }
})
})
但是此代碼無法實現滾動到一定位置時頁面再向下滾動側邊導航不再固定。
希望側邊只在在主題部分。但是事實上繼續向下滾動直到到底部,側邊導航都會出現在屏幕上。
4.代碼實現效果:
初始位置
向下滾動
向上滾動到一定頁面
需要實現效果:
初始位置:
向下滾動
繼續向下動(未實現)
總結
以上是生活随笔為你收集整理的html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: linux中开启514端口,linux中
- 下一篇: Native Vlan(本征vlan)