javascript - 使 div 元素粘在屏幕顶部

Question

我写了一个脚本来检测我何时到达作为导航栏的 div 元素，然后我将它的 css 更改为固定位置和顶部 0，这样它就会固定在顶部，但问题是它不会那，它的作用就像滚动到顶部并跳转到屏幕的开头。 (闪烁)

Javascript

        var currentScrollTop = 0;
        var barMenuOriginalTopPos = $('#navigation').offset().top;
        console.log('original:' + barMenuOriginalTopPos);
        $(window).scroll(function() {

            currentScrollTop = $(window).scrollTop();
            console.log(currentScrollTop);
            if(currentScrollTop >= barMenuOriginalTopPos && $('#navigation').hasClass('fixElementToTop') == false){
                $('#navigation').addClass('fixElementToTop');
            }
            else if(currentScrollTop < barMenuOriginalTopPos && $('#navigation').hasClass('fixElementToTop') ){
                $('#navigation').removeClass('fixElementToTop');
            }
        });

CSS

.fixElementToTop { position: fixed; top:0; z-index:100;}

为什么

Answer 1

这里是通过 jQuery 插件实现的非闪烁解决方案:

$(document).ready(function() {
    $('#fixedElement').scrollToFixed({ marginTop: 0 });
});

实例:http://bigspotteddog.github.com/ScrollToFixed/
插件的网站:https://github.com/bigspotteddog/ScrollToFixed/