CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Akhil Paul
Akhil Paul

Reputation: 721

How to remove a class when scroll function is active

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"));
    });

Upvotes: 1

Views: 240

Answers (2)

Akhil5
Akhil5

Reputation: 208

update this 

if (current_scroll <= scroll_pos) {

with the following

if (current_scroll <= scroll_pos || $('#header').hasClass('suppress-scroll')) {

Upvotes: 1

Spoochy
Spoochy

Reputation: 321

I don't fully understand your question, but is this what you're looking for?

var lastScrollTop = 0;
var headerElement = $('header');

$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // scroll down
     headerElement.addClass('header-hidden');
   } else {
      // scroll up
     headerElement.removeClass('header-hidden');
   }
   
   lastScrollTop = st;
});
body {
  background: #f5f5f5;
  position: relative;
}

header {
  background: white;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 15px;
  transition: 500ms margin-top ease;
}
header.header-hidden {
  margin-top: -100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <p>header</p>
</header>

<p>accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint natus rerum cum harum possimus, repellendus alias! Necessitatibus doloremque magnam ex sunt accusantium, omnis aut quod, optio eius qui voluptates quae?</p>

Edit Based on the feedback of the owner of this question: The reason that the header is gone when you click on the button is because your #overlay-nav has position: fixed combined with a top: 0 the header is still there, but your menu elements are on top off it.

either change z-index values or change the top: 0 values the code underneath will fix your issue, but don't forget to check responsive because you're setting a static value right now

#overlay-nav {
   top: 100px;
}

Upvotes: 0

Related Questions