Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to toggle class after 100vh scroll

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");
        }
    });
});
like image 629
Kevin Brandao da Graca Avatar asked Nov 04 '14 07:11

Kevin Brandao da Graca


1 Answers

100vh in jQuery is simple as $(window).height() while in pure JavaScript is window.innerHeight or a bit more longer.

jsFiddle demo

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

demo

like image 101
Roko C. Buljan Avatar answered Sep 24 '22 19:09

Roko C. Buljan