CODEWITHSUNDEEP
jquerycssscroll
Jenn
Jenn

Reputation: 15

Adding class on scroll and keeping behaviour after refreshing page

I have a perfectly functioning element that behaves as it should. Once the the user scrolls past a particular point, a class is added. When the user scrolls back up, the class is removed. My issue is that, once the class has been added, when I refresh the page, the class is no longer added until I scroll again.

This is intermittent. Firefox is the main browser that is consistently producing the issue. Chrome is on and off.

I've included a very simplified snippet of my code, however it's not easy to see as it needs a refresh. I've searched all day and looked at cookies, local storage, classie.js. I'm sure there's an easier, simpler solution than those.

Here is a website with a similar issue: https://bert.house/en/. Please check it in Firefox. The nav button on the top left of the page, scroll down and see what happens. Then refresh, you'll see that it goes back to it's original state until you scroll again.

  $(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 isn't a major issue. It's one that is bothering me as there must be a work around. Any help would be great. Thanks.

Upvotes: 0

Views: 966

Answers (2)

Michael Coker
Michael Coker

Reputation: 53709

"I've searched all day and looked at cookies, local storage, classie.js. I'm sure there's an easier, simpler solution than those."

Nope, that's what you'll use. CSS and HTML can't "remember" anything. You can set a localStorage item when the user scrolls, then on page load, check for that item, and if it exists, add the class via JS.

And since localStorage doesn't work in the sandbox environment for posts on SO, here's a codepen - http://codepen.io/anon/pen/ZLmgPw

$(function() {
  var box = $('.box');
  function setScrolled() {
    box.removeClass('box-NotScrolled');
    box.addClass('boxScrolled');
    localStorage.setItem('scrolled',true);
  }
  function removeScrolled() {
    if (box.hasClass('boxScrolled')) {
      box.removeClass('boxScrolled');
      box.addClass('box-NotScrolled');
    }
  }
  if (localStorage.getItem('scrolled')) {
    setScrolled();
  }
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 100) {
      setScrolled();
    } else {
      removeScrolled();
    }
  });
})
.box {
  position: fixed;
  top: 5%;
  left: 5%;
  width: 200px;
  height: 200px;
  background-color: red;
}
.boxScrolled {
  background-color: green;
}
.box-NotScrolled {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div style="height: 1000px"></div>

Upvotes: 0

Lucas Shanley
Lucas Shanley

Reputation: 416

This will run when you load the script and when you scroll or resize. This will essentially check for you on page load.

//Create classOnScroll function
function classOnScroll(){
  let $box = $('.box'),
      $scroll = $(window).scrollTop();
  
  if($scroll > 100){
    if(!$box.hasClass('boxScrolled')) 
      $box.addClass('boxScrolled');
  }
  else
    $box.removeClass('boxScrolled');

}

//Run on first site run
classOnScroll();

//Run on scroll and resize
$(window).on('scroll resize',classOnScroll);
.box {
  position: fixed;
  top: 5%;
  left: 5%;
  width: 200px;
  height: 200px;
  background-color: red;
}

.boxScrolled {
  background-color: green;
}
<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>

Upvotes: 2

Related Questions