My waypoint function has undefined behaviour when the user refreshes the page after scrolling past it

Question

I have a navigation bar and I've set its position to change to fixed when the user scrolls down past it and vice versa when the user scrolls up past that point by using the following waypoint:

var $navbar = $('.navbar-default');

$navbar.waypoint(function(){
    if ($('#navigation-bar').hasClass('navbar')){
        $('#navigation-bar').toggleClass('navbar-fixed');
    } else{
        ($('#navigation-bar').toggleClass('navbar'));
    }
}, { offset: '28%' });

This ensures the navbar stays on the users screen only past a certain point. This works as intended most of the time, however the issue is if the user scrolls down past that waypoint and then refreshes the page the navbar will jump back to its original position, which then causes undefined behaviour if you scroll back up past it.

Is there a way to ensure everything that is on the screen remains at that exact same spot when the user refreshes?

Answer 1

You can use the window.scrollTo function when the page loads

//scrollTo(x, y)
window.scrollTo(0, 0);

//the rest of your code...

This will scroll to the top-left of the page everytime the page loads.

Edit:

The answer from this question may also work:

* {
  overflow-anchor: none;
}