Scroll Event Not Firing On Page Reload

I am using the following code to add a class to the site header when the user scrolls: $(window).scroll(function() { if ($(this).scrollTop() > 170){ $('.header').ad

Solution 1:

As I understand it, the code runs when the user scrolls only and doesn't know the page is midway when the page is refreshed.

Yes, that's right.

There are few solutions. I suggest two:

---

1)

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

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

Bind the callback to the scroll event:

$( window ).scroll( FixHeader );

Finally:

How can I change this JS so that it runs on both the page load and when you refresh midway down the page.

let the callback be invoked as the DOM is ready:

$( FixHeader );

that is a shorthand to

$( document ).ready( FixHeader );

See jQuery documentation.

Note that some suggested to bind the event handled (FixHeader in my solution) to the load event.

I would not go that way since the load event fires only when the entire page has finished loading, adding a relevant delay.

---

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



$( window ).scroll( FixHeader );

$( FixHeader );

---

2)

The scroll event fires at a very fast pace when the user scrolls the page. And each time the callback is invoked; this may hurt a little bit performace.

Another solution is to wait the DOM is ready then check scrollTop at a reasonable pace:

functionFixHeader() {
    if ( $( window ).scrollTop() > 170 ) {
        $( '.header' ).addClass( 'sticky' );
    }
    else {
        $( '.header' ).removeClass( 'sticky' );
    }
    
    setTimeout( FixHeader, 500 );
}

$( FixHeader );

FixHeader is invoked the first time when the DOM is ready.

Then setTimeout( FixHeader, 500 ); let the function be executed every 500 ms (half second - adjust as you like...).

The scroll event is "out of the equation". No matter any more what causes the viewport to move, the scrollTop position is checked continuously.

This approach solves a potentially annoying issue when the user scrolls the window "around" 170px and the header start fickering due to the class sticky being added and removed continuously.

---

Both solutions can be improved further by saving in a variable the status of your header as you add or remove sticky, then checking the variable to avoid adding or removing the class when it is not needed. I leave this to you...

Solution 2:

You could add another event via on() so you can use your code on scrolling and on page load (or other events)

$(window).on("scroll load", function() {
  // your code here
}

Solution 3:

You should isolate your sticky class logic inside a separate function, which would be called on page load, then watched by jQuery scroll method. That way, if the user refreshes its page, you'll check on load if you should be sticky.

Btw, no need to use jQuery, plain standard javascript would do the job as seen here in this first google result.