Question

我想禁用页面的垂直滚动，直到用户已经滚动了300px，如果它没有被禁用，这是否可能，我将如何进行呢？可以在jquery中完成吗？

Answer 1

您需要使用css和javascript滚动事件监听器。你玩主要的div css定位

$(document).scroll(function(){
    if( $('.page').css('position')=="fixed" && $(document).scrollTop()>300 ){
        $('.page').css('position','static');
    }else if($('.page').css('position')!="fixed" && $(document).scrollTop()<=300){
        $('.page').css('position','fixed');
    }
})

检查这是否对您有所帮助：

http://jsfiddle.net/kcA7u/

动画：

http://jsfiddle.net/kcA7u/1/

Answer 2

这是一个棘手的问题。以下是实现此目的的一种方法：

http://jsfiddle.net/mLQhT/1/

注意：我没有测试这是否兼容跨浏览器。

CSS：

body { position: relative; }

JS：

$(function () {
  $(document).scroll(function (event) {
    var offset = $(window).scrollTop();
    $(document.body).css('top', Math.min(300, offset));
  });
});

基本上，我听了滚动事件。在滚动时，我将主体的顶部位置设置为滚动位置，使其看起来好像内容没有滚动。我还将此限制为最多300像素，因此一旦传递该点，内容将正常滚动。

编辑：替代解决方案

http://jsfiddle.net/mLQhT/3/

在此版本中，您必须将内容包装在单独的div中。

CSS：

.content {
    position: relative;
    top: 300px;
}
.content.fixed {
    position: fixed;
    top: 0;
}

JS：

$(function () {
    var $doc = $(document),
        $content = $doc.find('.content');
    //-- set body size to match content
    $doc.find('body').css({ minHeight: $content.outerHeight() });
    //-- wire up scroll event
    $doc.on('scroll', updateContent);
    function updateContent () {
        var top = $doc.scrollTop();
        if (top < 300) {
            $content.addClass('fixed');
        } else {
            $content.removeClass('fixed');
        }
    }
    //-- run update method on page load
    updateContent();
});

禁用页面滚动，直到用户滚动300像素？

2 个答案: