CODEWITHSUNDEEP
jquery
user979331
user979331

Reputation: 11911

jQuery add class on scroll, but not on initial load

I have this code here that adds and removes class based on scroll position, this even works on initial load and I do not want it to, how do I prevent that?

jQuery(window).scroll(function () {

  var scroll = jQuery(window).scrollTop();

  console.log(scroll);

  if (scroll >= 100) {
    jQuery("#banner").addClass("sticky");
  } else if (scroll == 0) {
    jQuery("#banner").removeClass("sticky");
  }

  if (scroll > 0) {
    jQuery(".navigation-top").addClass("sticky");
  } else if (scroll == 0) {
    jQuery(".navigation-top").removeClass("sticky");
  }

});

The issue is on the initial load when you refresh the page and the scroll is not 0

Upvotes: 1

Views: 414

Answers (3)

Anthony Kiiru
Anthony Kiiru

Reputation: 1

I had the same issue and found a solution here: https://www.py4u.net/discuss/959392 This example is a bit different but solves the same problem:

Separate the callback that fixes the header in a dedicated function:

function FixHeader() {
    if ( $( window ).scrollTop() > 170 ) {
        $( '.header' ).addClass( 'sticky' );
    }
    else {
        $( '.header' ).removeClass( 'sticky' );
    }
}

Bind the callback to the scroll event:

$( window ).scroll( FixHeader );

Finally:

let the callback be invoked as the DOM is ready:

$( FixHeader );

that is a shorthand to

$( document ).ready( FixHeader );

Upvotes: 0

Studocwho
Studocwho

Reputation: 2478

You could just use a boolean variable with an if statement in the scroll function to determine if the code should be run or not.

Here, we disable the code by setting variable to true onload, then on scroll we set it to false, allowing the function to execute.

var onload_functionDisable = true;

jQuery(window).scroll(function() {

    if (onload_functionDisable == false) {
        var scroll = jQuery(window).scrollTop();

        console.log(scroll);

        if (scroll >= 100) {
            jQuery("#banner").addClass("sticky");
        } else if (scroll == 0) {
            jQuery("#banner").removeClass("sticky");
        }

        if (scroll > 0) {
            jQuery(".navigation-top").addClass("sticky");
        } else if (scroll == 0) {
            jQuery(".navigation-top").removeClass("sticky");
        }
    }
    onload_functionDisable = false;
});

Edit The previous code was wrong and would always run. So now have improved it by moving the onload_functionDisable = false; to the bottom of scroll function. So on load the scroll function is disabled, but as soon as it skips the scroll code, the variable is set to false, enabling the code for the next scroll event.

I have a working simplified jsfiddle showing this.

Upvotes: 1

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

The issue is on the inital load when you refresh the page and the scroll is not 0

Okay.. The only solution I think of is:

On load, you will force scrollTop to zero.
Then register the scroll event handler.

$(window).scrollTop(0);

$(window).scroll(function () {

  var scroll = $(window).scrollTop();
  console.log(scroll);

  $("#banner").toggleClass("sticky", scroll >= 100 );
  $(".navigation-top").toggleClass("sticky", scroll > 0 );
});

The second argument is a condition that returns a true/false, in both cases.

Upvotes: 0

Related Questions