Question

我希望我的网站标题为：

i。）保持固定在顶部，而用户的滚动位置在顶部（让我们说：在顶部300px，或理想情况下直到滚动没有到达下一个元素）

ii。）当它在向下滚动时到达某个点时，标题将变为绝对定位，在页面向下滚动时创建“向上滚动”效果。

我使用以下代码进行此操作，但是当我在ipad上测试时，它非常慢，标题在响应之前有几秒钟的延迟。 是否有更好的实践，也许是实现这种效果的更有效方法？

<div class="header">
</div>
<div class="scrollarea1">
</div>
<div class="scrollarea2">
</div>


.header {
    background: #282828;
    position: fixed;
    height: 100px;
    width: 100%;
}
.scrollarea1 {
    background: #EFEFEF;
    height: 300px;
    width: 100%;
}
.scrollarea2 {
    background: #C0C0C0;
    height: 1700px;
    width: 100%;
}


$(document).ready(function () {
var elementStyle=document.getElementsByClassName("header").item(0).style;
        $(window).scroll(function(){             
                if( $(window).scrollTop() >= 300 ) {
                        elementStyle.position = "absolute";
                        elementStyle.marginTop = "300px";
                } else {
                        elementStyle.position = "fixed";
                        elementStyle.marginTop = "0px";
                }
        });
});

JsFiddle链接：http://jsfiddle.net/79ugd4x9/15/

Answer 1

以下内容仅适用于iOS设备，在大多数桌面浏览器中无法使用。如果需要支持其他浏览器，则应该保留滚动事件处理程序。

您可以尝试使用position: sticky和touchmove事件。我在iOS pageYOffset上使用scrollTop()代替scrollTop()，直到滚动事件结束才会更新。

var elementStyle = document.getElementsByClassName("header").item(0).style;
$(window).on('touchstart touchmove touchend', function () {
    if (window.pageYOffset >= 300) {
        elementStyle.position = "fixed";
        elementStyle['-webkit-transform'] = "translate3D(0px," + -(window.pageYOffset - 300) + "px,0px)";
    } else {
        elementStyle.position = "sticky";
        elementStyle['-webkit-transform'] = "translate3D(0px,0px,0px)";
    }
})

动画：

.header {
    ...
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear
}

您可能需要考虑使用translate3D而不是更改margin-top，因为它可以是硬件加速。动画应该可以工作，但我只能在刷新率有限的模拟器中测试，所以我无法确认。

JSFiddle Edit

编辑：要使用惯性滚动，请在触摸事件和滚动事件中调用处理程序。在iOS上，滚动处理程序在滚动事件结束时触发。

滚动网站标题，从某一点向下滚动

1 个答案: