I am facing an issue with an element on my page that adds a class when the user scrolls past a certain point and removes it when scrolling back up. The problem arises when I refresh the page after the class has been added, it doesn't persist until I scroll again.
The issue seems to be intermittent, with Firefox consistently showing the problem and Chrome occasionally experiencing it.
I have tried exploring solutions involving cookies, local storage, and classie.js, but I believe there should be a simpler way to solve this. Below is a simplified snippet of my code that demonstrates the behavior:
Please check this website in Firefox to see a similar issue: . Notice how the nav button on the top left changes after scrolling down, but reverts to its original state on refresh.
$(window).scroll(function() {
var box = $('.box');
var scroll = $(window).scrollTop();
if (scroll > 100) {
box.removeClass('box-NotScrolled');
box.addClass('boxScrolled');
} else {
if (box.hasClass('boxScrolled')) {
box.removeClass('boxScrolled');
box.addClass('box-NotScrolled');
}
}
});
.box {
position: fixed;
top: 5%;
left: 5%;
width: 200px;
height: 200px;
background-color: red;
}
.boxScrolled {
background-color: green;
}
.box-NotScrolled {
background-color: red;
}<div class="box"></div>
<div style="height: 1000px"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>This issue may not be critical, but it is certainly a nuisance. I am looking for a workaround to ensure the class persists consistently. Any assistance would be greatly appreciated. Thank you.