0

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?

Biggles-2
  • 31
  • 1
  • 7

1 Answers1

0

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;
}
luek baja
  • 1,475
  • 8
  • 20
  • This works pretty well, however it's quite obvious the page has scrolled to the top before it scrolls back to where it was when the user refreshes unfortunately. – Biggles-2 Sep 22 '20 at 22:57
  • Hmm I've tried using ```overflow-anchor: none;``` but I get the error ```Unknown property 'overflow-anchor``` – Biggles-2 Sep 22 '20 at 23:25