滚动页面一定距离后固定导航条

需求：滚动页面到一定距离后，页面中间的导航条固定到页面的某个位置不动，滚回去时会复原。

document.addEventListener('scroll', function (event) { var scrollDistance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;if (scrollDistance >= 230) {    // 触发的位置document.getElementsByClassName('nav-items‘)[0].style.cssText = 'position:fixed;top:-10px;';} else {document.getElementsByClassName('mu-tabs')[0].style.cssText = 'position:static;';}
});

注意：

1.子元素和父元素都有滚动条时，滚动鼠标滚轮：

　　鼠标在父元素中，页面只滚动父元素；鼠标在子元素中时，页面只滚动子元素，只有当子元素滚到底之后，才会滚动父元素。

　　如果要在子元素中直接滚动父元素，只能先把子元素的滚动条消除，如把子元素的容器高度设置成auto，或通过mousewheel/touchmove事件函数处理。

2.元素的position从static变为fixed时，会从原来的文档流中删除，高度发生变化，导致页面有轻微的跳动。解决方法是在导航条外层加一个高度相同的容器包裹一下。

<div class='navsContainer'><ul class='nav-items'><li>index</li><li>details</li><li>about</li></ul>
</div>

转载于:https://www.cnblogs.com/kevin2chen/p/7616747.html

滚动页面一定距离后固定导航条相关推荐

Bootstrap固定导航条
固定导航条默认情况下,导航条的定位属性为 static,它的位置由它的HTML代码中定义的顺序出现,并随着页面向下滚动. 很多时候,我们却希望导航条固定在浏览器窗口的顶部或底部,这种固定导航条的应用 ...
微信小程序导航栏滑动一定距离后固定到顶部
接上一篇文章的内容,通常在一个页面中部会有一个导航栏查看不同的内容,这篇文章旨在实现在页面下滑的过程中导航栏自动固定到顶部以便我们阅读过程中的切换. 下滑一段距离后自动固定到顶部首先,思考这个功能应 ...
Bootstrap 固定导航条
默认情况下,导航条的定位属性为 static,它的位置由它的HTML代码中定义的顺序出现,并随着页面向下滚动而消失.也可以改变它的定位方式,让它固定显示在浏览器窗口的顶部或底部. 1.固定在顶部如果 ...
CSS / JS 实现粘性头部（滚动到一定位置后固定）
要实现的效果: 当页面滚动到一定位置时,.nav position的值变为 fixed css 实现 .nav {position: sticky;top: 0px; } 粘性定位可以被认为是相 ...
html div挤下去了,网站固定导航条挤动下面的DIV_html/css_WEB-ITnose
这是导航栏CSS width: 1336px; background: #333; margin-top: 0px; font-size: 20px; z-index:9999; 这是下面div的CS ...
【JavaScript】 - 滚动固定导航栏
黄色箭头指向滚动条黑色箭头指向导航栏没有滚动之前导航栏没有固定在顶部任务是:随着滚动条滚动到一定位置导航栏固定顶部 dispaly:fixed 以下代码的 display ...
bootstrap单击导航条下的li后，自动收回
最近在写一个产品展示的页面,用到了bootstrap,发现导航条在手机上下拉时如果不跳转页面,下拉的导航条是不会自动回收的,需要自己手动添加onclick事件回收. 导航条的代码如下: <nav ...
html5磨砂透明首页制作,如何制作磨砂效果的顶部固定导航菜单
使用过iOS 7的朋友会看到上面有一种非常酷的顶部固定导航菜单效果-磨砂效果.顶部导航菜单是半透明的模糊效果,当往下滚动页面的时候,顶部导航菜单遮住页面的内容,因为它是半透明的,它下面的内容淡淡的显示 ...
用html实现模糊效果,纯html css实现动态高斯模糊效果（第二弹），实现导航条动态模糊内容...
还是先看效果图: 静态效果图.png GIF.gif 页面布局: 顶部高斯模糊导航条页面主体导航条动态高斯模糊实现原理第一步,将页面主体内容clone到navbar中,然后使用css3 -web ...

滚动页面一定距离后固定导航条

滚动页面一定距离后固定导航条相关推荐

最新文章

热门文章