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