CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Coder
Coder

Reputation: 1139

Need element to identify where it is on the page when page is refreshed

I have an element that changes color when the user scrolls past a certain section on the web page and it all works fine unless the user has already scrolled passed the section but then refreshes the page.

When the page is refreshed the page remains on its last position but the element color returns to its original CSS color.

e.g.

in essence, I am looking to see if there is a way that JavaScript/JQuery can identify what section the element is against once the page has refreshed and then add the correct CSS properties accordingly.

here is the code I currently have: 

var targetOffset = $("#firstSection").offset().top;

  var $w = $(window).scroll(function() {
    if ($w.scrollTop() >= targetOffset) {
      $(".element").css({ color: "#636C72" });
    } else {
      $(".element").css({ color: "white" });
      return false;
    }
  });

Upvotes: 0

Views: 50

Answers (1)

epascarello
epascarello

Reputation: 207557

Just trigger scroll when you define it so the logic runs. 

var $w = $(window).scroll(function() { }).scroll()

or with trigger

var $w = $(window).scroll(function() { }).trigger('scroll')

or make it a function

var scrollFnc = function () {}
var $w = $(window).scroll(scrollFnc)
scrollFnc()

Upvotes: 2

Related Questions