Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138337

How to remove a class when scroll function is active

$
0
0

I'm trying to make a header that is sticky when scrolling upwards and not showing when scrolling downwards using javascript, to do that I added a class .header-up and gave transform: translateY(-100%); through CSS. It's working perfectly fine, BUT when I open the full-page menu in header and trying to close [no issues when header at the top, but we can see the problem after scrolling a bit from top] it the class 'header-up' is still there. So the header going upwards behind the viewport area. I tried to remove the .header-up class using this code s.removeClass("header-up") to make the header stick at the same place. Here goes the jsFiddle

here is the javascript I used for scroll and toggle the full page menu.

$( document ).ready(function() {
    var scroll_pos = 0;
        var scroll_time;

    $(window).scroll(function() {
      clearTimeout(scroll_time);
      var current_scroll = $(window).scrollTop();

      if (current_scroll >= $("#header").outerHeight()) {
        if (current_scroll <= scroll_pos) {
          $("#header").removeClass("header-up");
        } else {
          $("#header").addClass("header-up");
        }
      }

      scroll_time = setTimeout(function() {
        scroll_pos = $(window).scrollTop();
      }, 100);
    });
});



    $("#navbar-toggle").on("click", function(t) {
      var e = $(this).data("scroll-y"),
        i = $(window).scrollTop(),
        n = $("#navbar-toggle"),
        o = $("#overlay-nav"),
        s = $("#header"),
        r = $("body");
      o.hasClass("toggle")
        ? (r.css("top", "0px").removeClass("noscroll"),
          window.scrollTo(0, e),
          o.removeClass("toggle"),
          n.removeClass("open"),
          s.removeClass("overlay-nav-toggled"),
          s.removeClass("pos-fixed"),
          s.removeClass("header-up"),
          setTimeout(function() {
            s.removeClass("suppress-scroll");
          }, 700))
        : ($(this).data("scroll-y", i),
          o.addClass("toggle"),
          n.addClass("open"),
          s.addClass("overlay-nav-toggled suppress-scroll"),
          r.css("top", -i + "px").addClass("noscroll"));
    });

Viewing all articles
Browse latest Browse all 138337

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>