web-dev-qa-db-ja.com

100vhスクロール後にクラスを切り替える方法

100vhをスクロールした後、この関数にクラスを追加させる方法は？
現在、850pxの後にクラスを追加しています。

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

    $(window).scroll(function () {
        if ($(this).scrollTop() > 850) {
            nav.addClass("doch");
        } else {
            nav.removeClass("doch");
        }
    });
});
javascriptscrollheightviewport
12
Kevin Brandao da Graca

jQueryの_100vh_は$(window).height()のように単純ですが、純粋なJavaScriptの場合は_window.innerHeight_ またはもう少し長い =。

jsFiddleデモ

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

デモ

18
Roko C. Buljan