在Scroll上运行函数，但不要在页面上滚动

Question

我有一个页面，在页面的内容顶部有一个div，我想要像第一个滚动事件的帷幕一样提起它，但实际上不是向上滚动页面本身。

窗帘升起后，我要滚动再正常运行。

这是我正在使用的代码。我基本上是使用幻灯片类来更改#标题-图像位置，使其位于文档顶部，从而创建起帷幕效果。

$(function(){
var stickyHeaderTop = $('#header-image').offset().top;
    $(window).scroll(function(){
        if( $(window).scrollTop() > stickyHeaderTop ) {
            $('#header-image').addClass('slideup');
        } else {
            $('#header-image').removeClass('slideup');
        }
    });
});

Answer 1

这应该能行..。

html

<div id="curtain">
    <div class="curtain-inner"></div>
</div>
<div id="content">
...your content here...
</div>

css

#curtain {
    height: 0;
    overflow: visible;
    position: absolute;
    top: 0;
    transition: top 1s ease;
    width: 100%;
}
#curtain .curtain-inner {
    background-color: rgb(0, 0, 255);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    height: 500px;
}
#content {
    margin-top: 120px;
}
#curtain.raised {
    top: -500px;
}

javascript

$(function() {
    var $window = $(window);
    var marginTop = parseInt($("#content").css("margin-top"), 10);

    $window.on("scroll", function() {
        var scrollTop = $window.scrollTop();
        if (scrollTop > 50) {
            $("#curtain").addClass("raised");
        }
        else {
            $("#curtain").removeClass("raised");
        }
    });
});

jsfiddle示例

http://jsfiddle.net/g04kb5m4/2/

它所做的是在窗口滚动时重新定位内容，因此它似乎不会移动。一旦你滚动到窗帘层的底部，它就可以正常滚动。

此外，窗帘层占据0高度，.curtain-inner是您想要显示的。使用overflow: visible;意味着您可以看到窗帘层的内容，尽管它的高度为0像素。这使内容坐在页面的顶部，尽管是在帷幕之后。