滚动100伏时后滚动顶部

Question

我有一个首页，顶部有一个100vh的div，当您在此div之后向下滚动时，我想隐藏它。 或在滚动此100vh div后禁用向上滚动的可能性。 当您到达网站时，该div应该只出现一次。

这里的链接： http ://tmp.thomasdesnoyers.com/在彩色大背景div之后，您将无法向上滚动。

在滚动窗口的高度后，我尝试向此div添加一个“ display：none”属性，但是这样做的效果是占用了所有内容……如果有人对此有任何线索……

这个div隐藏：

<div id="home-background" class="monobg">


<?php $images_toomany = array("/wp-content/img/toomany.svg", "/wp-
content/img/toomany_2.svg", "/wp-content/img/toomany_3.svg", "/wp-
content/img/toomany_4.svg", "/wp-content/img/toomany_5.svg");?>
<?php echo '<img src="'.$images_toomany[array_rand($images_toomany)].'" 
class="toomany" />';?>

<?php $images_pictures = array("/wp-content/img/pictures.svg", "/wp-
content/img/pictures_2.svg", "/wp-content/img/pictures_3.svg", "/wp-
content/img/pictures_4.svg", "/wp-content/img/pictures_5.svg",);?>
<?php echo '<img src="'.$images_pictures[array_rand($images_pictures)].'" 
class="pictures" />';?>


</div>

谢谢。

托马斯

Answer 1

是。 超级简单。 如果要防止滚动到当前视口之外，只需将overflow：hidden隐藏到您的body元素中。 您可以通过JS或jQuery动态地执行此操作。

Answer 2

尝试这个

$(window).scroll(function() {

    var div_height = $('#home-background').height();    
    var page_scroll = $(window).scrollTop();

    if(page_scroll > div_height) {
        $('#home-background').css('display', 'none');
    }
});

Answer 3

这是我的溢出技术代码。 我认为这是一个好的开始：

jQuery(function($) {

var $nav = $('body');
var $win = $(window);
var winH = $win.height(); // Get the window height.

$win.on("scroll", function () {
    if ($(this).scrollTop() > winH ) {
        $nav.addClass("hide");
    } 
}).on("resize", function(){ // If the user resizes the window
   winH = $(this).height(); // you'll need the new height value
});

});