javascript - 滚动传递时如何隐藏div/元素？

Question

当你滚动经过它们时，我试图隐藏两个高度为 100vh 的 div，但到目前为止它只隐藏了第一个 div。

我的 HTML:

<div id="bluevh">My Height is 100vh</div>
<div id="vh">My Height is 100vh</div>

<h1 id="verschwinden">verschwinden</h1>

我的 jQuery:

jQuery(function($) {

    var $nav = $('#verschwinden'),
        $win = $(window),
        winH = $win.height() * 2;    // Get the window height.

    $win.on("scroll", function () {
       $nav.toggleClass("doch", $(this).scrollTop() > winH );
       $('#bluevh').css('display', 'none');
       $('#vh').css('display', 'none');

    }).on("resize", function(){ // If the user resizes the window
       winH = $(this).height(); // you'll need the new height value
    });

});

jfiddle:http://jsfiddle.net/4zw0cjsu/141/

Answer 1

如果您希望这两个 div 在用户向下滚动页面时淡出。您可以使用这个 JQuery 函数:

HTML:

<div class="bluevh">My Height is 100vh</div>
<div class="vh">My Height is 100vh</div>

JQuery:

$(window).scroll(function(){ 
    $(".bluevh, .vh").css("opacity", 1 - 
        $(window).scrollTop() / 300); 
});