Question

So i have a long scrolling 1page website with a fixed navigation bar.

With this navigation bar I would like to track its .offset().top so I may add or remove classes based on the offset from the top of the window.

Live code link

Example (this is my logic but i cannot make the jQuery alert even work.

$(window).scroll(function () {
  var elem = $('.navigation');
  var topValue = offset.top;
  if (topValue > 400) {
    alert(topValue);
  }
});

Answer 1

Try jQuery Waypoints. Instead of specifying an offset, you use the elements on your page to trigger a callback whenever they come into view:

$(function () {
  $("#map").waypoint(function () {
    alert("Scrolled to #map");
  });
});

Edit:

But to properly answer your question, your navigation will always be in the same position because position: fixed positions your element relative to the viewport, not the page. If you want to do this without Waypoints, just check the body tag’s scrollTop:

$(function () {
  $(window).scroll(function () {
    var offset = $("body").scrollTop();
    if (offset > 400)
      alert("Scrolled to 400");
  });
});