How to toggle class after 100vh scroll

Question

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

Shouldn't it be `$(document)` ? or even shorter: `jQuery(function($){` — Roko C. Buljan, Nov 04 '14 at 07:29
I dont know, that is what i found in the internet and it works. — Kevin Brandao da Graca, Nov 04 '14 at 07:32

score 23 · Accepted Answer · edited May 23 '17 at 12:26

23

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

edited May 23 '17 at 12:26

Community

1
1

answered Nov 04 '14 at 07:36

Roko C. Buljan

180,066
36
283
292

Nice it works! But i have forget that the Naviagtion took also 6vh, is there some way to remove the height oft the navigation from the windows height? – Kevin Brandao da Graca Nov 04 '14 at 08:07
6 viewport height is 6% sry – Kevin Brandao da Graca Nov 04 '14 at 08:12

How to toggle class after 100vh scroll

1 Answers1