如何在100vh滚动后切换类

时间:2014-11-04 07:28:38

标签: javascript scroll height viewport

如何使此功能在滚动100vh后添加课程? 目前,它会在850px之后添加课程。

$("document").ready(function($){
    var nav = $('#verschwinden');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 850) {
            nav.addClass("doch");
        } else {
            nav.removeClass("doch");
        }
    });
});

1 个答案:

答案 0 :(得分:18)

jQuery中的

100vh$(window).height()一样简单,而纯JavaScript中的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
    });

});

您还可以通过简单地使用:

来缩短if部分
$nav.toggleClass("doch", $(this).scrollTop() > winH );

demo