javascript - 纯css能否实现某些网站类似导航条的一个东西

Question

在打开页面时，该导航在页面中的一个p的顶部
滚动页面时，该导航随页面滚动到窗口的顶部，随后停在那里（position:fixed; top:0; ）
如果不能的话求js思路

Answer 1

纯css 可能很点困难。 我说下使用js的想法：
1. 记录导航条初始状态下距离页面顶部的距离startPos
2. 在滚动事件上计算页面滚动的距离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.

Answer 2

目前CSS没法做判断的啦，要么你就一直在顶部~

Answer 3

你让jQuery.sticky.js情何以堪

Answer 4

css有动画功能 但是 没有类似js监听触发机制 css的动画会在他出现的页面中立马执行，所以只能用js实现，
js实现 只要监听滚动事件就好，当滚动事件被触发 你就可以动态设置css的属性 比如修改position 定位，平缓过渡就设置了一下js的动画 或者是css3的transition 属性就好