Question

我有一个页面，我在页面顶部有一个div，我想在第一个滚动事件中像窗帘一样提升，但实际上并没有向上滚动页面本身。

在幕布div升起后，我希望滚动再次正常运行。

以下是我正在使用的代码。我基本上使用滑动类将＃header-image位置更改为位于文档顶部之上，从而创建了提升幕布效果。

$(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像素。这就是使内容位于页面顶部的原因，尽管它已经落后了。

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

1 个答案: