How to make this function add the class after scrolling 100vh
?
Currently it adds the class after 850px
.
$("document").ready(function($){
var nav = $('#verschwinden');
$(window).scroll(function () {
if ($(this).scrollTop() > 850) {
nav.addClass("doch");
} else {
nav.removeClass("doch");
}
});
});
100vh
in jQuery is simple as $(window).height()
while in pure JavaScript is window.innerHeight
or a bit more longer.
jQuery(function($) {
var $nav = $('#verschwinden');
var $win = $(window);
var winH = $win.height(); // Get the window height.
$win.on("scroll", function () {
if ($(this).scrollTop() > winH ) {
$nav.addClass("doch");
} else {
$nav.removeClass("doch");
}
}).on("resize", function(){ // If the user resizes the window
winH = $(this).height(); // you'll need the new height value
});
});
you can also make the if
part a bit shorter by simply using:
$nav.toggleClass("doch", $(this).scrollTop() > winH );