Sticky Nav闪烁如闪烁的灯光 [英] Sticky Nav flickering like flashing lights

问题描述

我制作了代码，以使nav可以是一个粘性导航，但是我创建的代码用于制作粘性导航，使导航栏粘滞闪烁，为什么？

以下是我的代码：

 ; （函数（$）{
 
 $ .fn.tosticky =函数（o）{
 
o = $ .extend（{
 
 tofixedClass：' classtofixed'，
 fixedClass：'fixedclass'，
 top：0，
 bottom：0 
 
}，o）; 
 
 return this.each（function（）{
 
 var $ window = $（window），
 $ this = $（this）; 
 
 $ window.on（ scroll，function（）{
 var fence = $（o.tofixedClass）.offset（）。top; 
 var scrollTop = $（this）.scrollTop（）; 
 if（ scrollTop> fence）{
 $（o.tofixedClass）.addClass（o.fixedClass）.css（{margin-top：o.top，margin-bottom：o.bottom}）; 
} else {
 $（o.tofixedClass）.removeClass（o.fixedClass）; 
} 
}）; 
 
}）; 
}; 
}）（jQuery）; 
 
 $（function（）{
 $（。pagar）。tosticky（{//使用它在
上面运行代码tofixedClass：'.pagar'，
 fixedClass：'fixed'，
 top：0，
 bottom：0 
}）; 
}）; 
  

以下是我在jsfiddle中的代码：点击此处

解决方案

元素到达窗口的顶部，它与顶部的距离等于 $（this）.scrollTop（）; ，所以你必须包含这些情况相等，否则 if 语句的其他部分将为true，因此 fixedClass 将被删除，再次添加，当你做一些滚动，然后整件事再次开始，因此闪烁。

为了解决这个问题，只需替换大于使用大于或等于的符号（> = ）签署（> ）你的 if 语句：

  if（scrollTop> = fence）{ 
 $（o.tofixedClass）.addClass（o.fixedClass）.css（{margin-top：o.top，margin-bottom：o.bottom}）; 
} else {
 $（o.tofixedClass）.removeClass（o.fixedClass）; 
 
 $ / code> 

这是您更新的小提琴： http://jsfiddle.net/1wxggpv5/6/

编辑：按照你的评论，虽然这不是你原来的问题的一部分，但我知道你希望这个盒子保持在原来的位置，并且当你向后滚动时，整个事情会回到原来的位置。 p>

为此，您必须在 .pagar #box c $ c>并将您的 fence 变量移出 on.scroll 函数，如下所示：

$
$ b

jQuery（相关位）：

  return this.each（function（）{ 
 
 var $ window = $（window），
 $ this = $（this），
 fence = $（o.tofixedClass）.offset（）。top; 
 
 $ window.on（scroll，function（）{
 var scrollTop = $（this）.scrollTop（）; 
 if（scrollTop> = fence）{
 $（o .tofixedClass）.addClass（o.fixedClass）的CSS（{ 边距：o.top， 边距：o.bottom}）; 
} else {
 $（o.tofixedClass）.removeClass（o.fixedClass）; 
} 
}）; 
}）; 
  

HTML：

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script> 
< div class =pagar> 
如果您滚过我，那么您将*不会*看到闪烁的灯光闪烁，我们现在知道为什么了:) 
< div id =box> 
哦，你好！ ：D 
< / div> 
< / div> 
< div class =scroll>< / div> 
  

我用这段代码更新了原始的小提琴： http://jsfiddle.net/1wxggpv5/19/

I made the code, to make the nav can be a sticky nav, but the code that I created to make the sticky nav, making the sticky nav blinking, why? Where is the fault?

Here is my code :

;(function($) {

    $.fn.tosticky = function(o) {

        o = $.extend({

            tofixedClass: 'classtofixed',
            fixedClass: 'fixedclass',
            top: 0,
            bottom: 0

        }, o);

        return this.each(function() {

            var $window = $(window),
                $this = $(this);    

            $window.on("scroll", function() {
                var fence = $(o.tofixedClass).offset().top;
                var scrollTop = $(this).scrollTop();
                if(scrollTop > fence) {
                    $(o.tofixedClass).addClass(o.fixedClass).css({"margin-top":o.top,"margin-bottom":o.bottom});
                } else {
                    $(o.tofixedClass).removeClass(o.fixedClass);
                }  
            });

        });
    };
})(jQuery);

$(function () { 
    $(".pagar").tosticky({ // use this to run code in above
        tofixedClass: '.pagar',
        fixedClass: 'fixed',
        top: 0,
        bottom: 0 
    });
});

And here is my code in jsfiddle : Click Here

解决方案

This is happening because when your element reaches the top of the window, its distance from the top becomes equal to $(this).scrollTop();, so you'll have to include cases where these are equal, otherwise the other part of the if statement will be true, thus the fixedClass will be removed, then re-added again when you do some scrolling, then the whole thing starts again, hence the flickering.

To correct this, just replace the greater than sign (>) with greater than or equal sign (>=) in your if statement:

if(scrollTop >= fence) {
    $(o.tofixedClass).addClass(o.fixedClass).css({"margin-top":o.top,"margin-bottom":o.bottom});
} else {
    $(o.tofixedClass).removeClass(o.fixedClass);
}

Here is your updated fiddle: http://jsfiddle.net/1wxggpv5/6/

EDIT: following your comment, although this wasn't part of your original question, I understand you want the box to remain where it is, and the whole thing to go back to its original position when you scroll back up.

To do that, you'll have to move #box inside .pagar and move your fence variable out of the on.scroll function as follows:

jQuery (the relevant bits):

return this.each(function() {

    var $window = $(window),
        $this = $(this),   
        fence = $(o.tofixedClass).offset().top;

    $window.on("scroll", function() {
        var scrollTop = $(this).scrollTop();
        if(scrollTop >= fence) {
            $(o.tofixedClass).addClass(o.fixedClass).css({"margin-top":o.top,"margin-bottom":o.bottom});
        } else {
            $(o.tofixedClass).removeClass(o.fixedClass);
        }  
    });
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "pagar">
    If you scroll past me, then you'll *NOT* see such as flashing lights flickering, and we now know why :)
    <div id = "box">
        Oh hello! :D
    </div>
</div>
<div class="scroll"></div>

I updated your original fiddle with this code: http://jsfiddle.net/1wxggpv5/19/

这篇关于Sticky Nav闪烁如闪烁的灯光的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！