请教悬浮顶部BUG的解决方法

元素悬浮在顶部之后，滚动条下拉元素依旧停留在顶部，element.offsetTop的值一直是0.
想要原生的，这样的效果http://www.bootcss.com/p/stickup/。这个问题怎么解决

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .fixed{
            position: fixed;
            top: 0;
        }
    </style>
</head>
<body>




<div style="height:200px;background-color:#EFE4B0;"></div>








<div id="fixed" style="height:40px;width:100%;background-color:#7092BE;color:#fff;">这个div到达顶部时悬浮在顶部，不到顶部不悬浮</div>








<div style="height:2000px;background-color:#C3C3C3;"></div>








<script type="text/javascript">
    var fixedDom = document.getElementById('fixed');
    
    window.addEventListener('scroll',winScroll);

    function winScroll(e){
        var top = getElementViewTop(fixedDom);

        top < 1 ? fixedDom.classList.add("fixed") : fixedDom.classList.remove("fixed");
        console.log(top);
    }

    function getElementViewTop(element){
　　　　var actualTop = element.offsetTop,
        elementScrollTop=document.body.scrollTop;
        console.log('actualTop' + actualTop);    
        console.log('elementScrollTop' + elementScrollTop);　　　　

        return actualTop-elementScrollTop;
　　}
    </script>




</body>
</html>

检查一下是否设置了body, html {height 100%;}

我写了一个顶部悬浮导航的jQuery插件: https://github.com/buildAll/fix-nav.js

<script>
    var fixedDom = document.getElementById('fixed');
    var fixedTop = fixedDom.offsetTop;
    var bodyDom = document.body;
    window.addEventListener('scroll',function(){
        fixedDom.classList[fixedTop - bodyDom.scrollTop < 1 ? 'add' : 'remove']('fixed');
    });
</script>

你是想要这个效果么？

此外，你用的比如 classList，document.body 可能会存在浏览器兼容问题哦

【热门文章】

请教 悬浮顶部BUG的解决方法

请教悬浮顶部BUG的解决方法