Sticky Nav flickers like flashlights

Question

I made the code to make the navigation sticky, but the code I created to make the sticky navigator made the sticky navigation blink, why? Where is the mistake?

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

Answer 1

This is because when your element reaches the top of the window, its distance from the top becomes equal $(this).scrollTop();, so you have to include cases when they are equal, otherwise the other part ifwill be true, so it fixedClasswill be deleted and then added again when scrolling, then everything will start again, hence flicker.

, > , (>), (>=) if:

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

: http://jsfiddle.net/1wxggpv5/6/

: , , , , , , , .

, #box .pagar fence on.scroll :

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({"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>

: http://jsfiddle.net/1wxggpv5/19/

Answer 2

, , . , setTimeout clearTime.

            $.fn.tosticky = function(o) {

                    o = $.extend({

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

                    }, o);

                    return this.each(function() {
                        var timeoutId = null;
                        var $window = $(window),
                            $this = $(this);    

                        $window.on("scroll", function() {

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



                    });
                };

, ;

, , setTimeout clearTimeout.