Question

我正在制作一个单页的网站。

基本上，我有这个动画着陆页，其中包含着陆图像和引导程序jumbotron。我希望能够实现一个功能，一旦用户滚动到jumbotron的末尾，用户就无法向上滚动以查看着陆图像和jumbotron。从某种意义上说，要么隐藏或删除位于顶部的<div>，要么完全禁止滚动回到这些点。

我找到了这段代码，但它会自动禁止在页面加载时向上滚动到页面顶部（200 px之后）：

$(function() {
    var scrollPoint = 200;
    $(window).scroll(function() {
    $(window).scrollTop() < scrollPoint ? 
    $(window).scrollTop(scrollPoint) : '';
  }).scroll();
});

有什么想法吗？

Answer 1

您可以使用此代码隐藏jumbotron。

$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('#id_of_jumbotron').offset().top + 
 $('#id_of_jumbotron').outerHeight() - window.innerHeight) {
    hideTheJumboTron();
}
});

Answer 2

试试这个：

$(function () {
    var scrollPoint = 200;
    $(window).scroll(function () {
        if ($(window).scrollTop() < scrollPoint) {
            console.log($(window).scrollTop());
            $(window).scrollTop(scrollPoint)
            return false;
        }
    }).scroll();
});

jQuery - 防止用户滚动过去的某些滚动高度

2 个答案: