Javascript scroll addClass

Question

I want my navbar to be transparant on the top and bottom of my page but i want it to not be transparant in the middle. When i have my webpage on full screen this works:

$(window).on("scroll", function () {
    if ($(window).scrollTop() > 720 && $(window).scrollTop() < 1450 ) {
        $(".nav").addClass("active");
    } else {
        $(".nav").removeClass("active");
    }
})

But when it gets resized this wont work anymore because the sizes change. Is there a way to do this with % instead of just normal numbers so it will be responsive?

this thread may help https://stackoverflow.com/questions/3464876/javascript-get-window-x-y-position-for-scroll — t3__rry, Feb 15 '18 at 13:23

David C. · Accepted Answer · 2018-02-15T13:47:33.147

0

It occur because you hardcoded your height values. Check the whole site height, divide it on three and incorporate this variables to your if statement. Every time you resize browser window it will recalculate your new position.

window.addEventListener('resize', function() {
  //one third and two third of website
  oneThird = window.scrollHeight / 3;
  twoThird = onethird * 2;

  if ( $(window).scrollTop() > oneThird && $(window).scrollTop() < twoThird ) {
      $(".nav").addClass("active");
  } else {
      $(".nav").removeClass("active");
  }
}

edited Feb 15 '18 at 13:47

answered Feb 15 '18 at 13:36

David C.

201
2
11

My html page Height is 300% – FluffyMe Feb 15 '18 at 13:38
what do you mean 300% ? window element will always be 100% because it have no parent element relative to it. No matter how high it is. – David C. Feb 15 '18 at 13:49

score -1 · Answer 2 · answered Feb 15 '18 at 13:31

-1

You can use Media Queries with JS too, so you can do certain things on your desired window size, this might help https://www.w3schools.com/howto/howto_js_media_queries.asp

answered Feb 15 '18 at 13:31

Osama Xäwãñz

437
2
8
21

Javascript scroll addClass

2 Answers2