84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
在打开页面时，该导航在页面中的一个p的顶部滚动页面时，该导航随页面滚动到窗口的顶部，随后停在那里（position:fixed; top:0; ）如果不能的话求js思路
光阴似箭催人老，日月如移越少年。
纯css 可能很点困难。 我说下使用js的想法：1. 记录导航条初始状态下距离页面顶部的距离startPos2. 在滚动事件上计算页面滚动的距离scrollTop，并比较 startPos 和 scrollTop的大小，如果startPos > scrollTop 则保持导航条在初始位置，否则置顶导航条。
var startPos = $('.nav').offset().top; function setNavPos(){ var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop); if (scrollTop > startPos){ $('.nav').addClass('to-top'); }else{ $('.nav').removeClass('to-top'); } } $(window).on('scroll', setNavPos);
如果要支持移动设备，就要使用touch类的事件了， 例如touchmove, touchstart, touchover.
目前CSS没法做判断的啦，要么你就一直在顶部~
你让jQuery.sticky.js情何以堪
css有动画功能 但是 没有类似js监听触发机制 css的动画会在他出现的页面中立马执行，所以只能用js实现，js实现 只要监听滚动事件就好，当滚动事件被触发 你就可以动态设置css的属性 比如修改position 定位，平缓过渡就设置了一下js的动画 或者是css3的transition 属性就好
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
纯css 可能很点困难。 我说下使用js的想法：
1. 记录导航条初始状态下距离页面顶部的距离startPos
2. 在滚动事件上计算页面滚动的距离scrollTop，并比较 startPos 和 scrollTop的大小，如果startPos > scrollTop 则保持导航条在初始位置，否则置顶导航条。
如果要支持移动设备，就要使用touch类的事件了， 例如touchmove, touchstart, touchover.
目前CSS没法做判断的啦，要么你就一直在顶部~
你让jQuery.sticky.js情何以堪
css有动画功能 但是 没有类似js监听触发机制 css的动画会在他出现的页面中立马执行，所以只能用js实现，
js实现 只要监听滚动事件就好，当滚动事件被触发 你就可以动态设置css的属性 比如修改position 定位，平缓过渡就设置了一下js的动画 或者是css3的transition 属性就好