Jack Man Jack Man - 6 months ago 11
jQuery Question

Why isn't my scroll working?

My code checks if the scroll is

>=
to
100
. If true, it shows my sticky nav. If not, it should hide the sticky nav. Right now, the true portion works. But when I add the false argument, when I scroll, the entire sticky nav disappears in general.

Code

$(function(){
var hasBeenTrigged = false;
$(window).scroll(function() {
if ($(this).scrollTop() >= 100 && !hasBeenTrigged) { // if scroll is greater/equal then 100 and hasBeenTrigged is set to false.
$("#sticky_nav").show();
hasBeenTrigged = true;
} else {
$("#sticky_nav").hide();
}



});
});

Answer

Check the variable hasBeenTrigged in the true part of $(this).scrollTop() >= 100 statement

$(function(){
    var hasBeenTrigged = false;
    $(window).scroll(function() {
        if ($(this).scrollTop() >= 100) { // if scroll is greater/equal then 100 and hasBeenTrigged is set to false.
           if(!hasBeenTrigged){
              $("#sticky_nav").show();
              hasBeenTrigged = true;
           }
        } else {
          // this only if you want to show again, on the next scroll down
          hasBeenTrigged = false;
          $("#sticky_nav").hide();
        }



    });
});