Question

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

此处链接：http://tmp.thomasdesnoyers.com/ 在大彩色背景div之后，你无法向上滚动。

我尝试在滚动窗口高度后向此div添加'display：none'proprety，但它具有取出所有内容的效果...... 如果有人对此有任何线索......

这个隐藏的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。您可以通过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
});

});

滚动100vh后，Bloc滚动顶部

3 个答案: