Javascript 使div元素粘贴到屏幕顶部

Javascript 使div元素粘贴到屏幕顶部,javascript,css,Javascript,Css,我写了一个脚本来检测我何时到达div元素,它是一个导航栏,然后我将它的css更改为位置固定和顶部0,这样它将被固定到顶部,问题是它没有这样做,它的行为就像滚动到顶部,它跳到屏幕的开始。(它闪烁着) Javascript var currentScrollTop = 0; var barMenuOriginalTopPos = $('#navigation').offset().top; console.log('original:' + barMe

我写了一个脚本来检测我何时到达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固定条

<div style="position:fixed;top:10px;left:10px">Nav bar</div>
导航条 审查:

很抱歉,我不理解您最初的问题,这里是这样的,为了避免它弹动,您应该以固定位置启动对象,假设:

<div style="height:120px">XXX</div>
<div id="navigation" style="position: fixed; top:120; z-index:100;">Navigation</div>
<div class="win" style="border: 1px solid; height: 900px;"></div>
XXX
航行
守则:

$(window).scroll(function() {
    currentScrollTop = 120-$(window).scrollTop();
    console.log(currentScrollTop);
    if (currentScrollTop<0) currentScrollTop=0
    $("#navigation")[0].style.top=currentScrollTop+"px";
});​
$(窗口)。滚动(函数(){
currentScrollTop=120-$(窗口).scrollTop();
console.log(currentScrollTop);
如果(currentScrollTop设置此行

var barMenuOriginalTopPos = $('#navigation').offset().top;
作为

请参阅这里通过jQuery插件提供的非闪烁解决方案:

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

插件的网站

它仍然闪烁(进入顶部)。是否有人可以指示此部分的jquery。style.top=currentScrollTop+“px”?问题可能是由$(窗口)引起的。滚动,因为只要你滚动,它就会触发事件十几次。因此,解决方案可能是,如果我处理一个事件,然后我就会解除绑定。对吗?我会像那样保留它,因为你可能需要向后滚动,而且无论如何你必须进行检查。在chrome上,它会一直闪烁(当我添加类来设置位置时,滚动到顶部)不要设置类,是类设置导致了flick,元素必须从beggining开始固定位置,请参见上面的小提琴下面的答案解决了您的问题吗?
var barMenuOriginalTopPos = $('#navigation').offset().top + 6;
$(document).ready(function() {
    $('#fixedElement').scrollToFixed({ marginTop: 0 });
});