滚动传递时如何隐藏 div/元素？答案

【问题标题】：how to hide div/element when you scroll pass it?滚动传递时如何隐藏 div/元素？
【发布时间】：2018-06-25 10:42:36
【问题描述】：

当您滚动经过它们时，我试图隐藏两个高度为 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/

【问题讨论】：

这个JQuery函数一定要使用吗？或者它可以是另一个 JQuery 函数，当用户滚动它们时淡化两个 div？
@billy.farroll 你不需要使用 jQuery

标签： javascript jquery html css scroll

【解决方案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); 
});

【讨论】：

一秒钟。我会为您提供准确的 sn-p。