Question

我有一个运行大量javascript的大页面，其中还包含一个固定位置的浮动元素。浮动元素通过触发滚动事件的函数，根据用户当前的滚动位置更新其位置。

我遇到的问题是，由于页面的大小和复杂性，滚动事件中的代码执行前会有一段延迟，这会导致固定元素在快速滚动或使用鼠标时显着跳转轮。

参见jsfiddle：http://jsfiddle.net/jorsgj2b/1/（使用setTimeout模拟在实际页面上执行函数的延迟。）

<div class="header"></div>
<div class="main"></div>
<div class="float"></div>

.header {
    width: 100%;
    height: 200px;
    background-color: #787878;
}

.main {
    width: 100%;
    height: 1400px;
    background-color: lightblue;
}

.float {
    position: fixed;
    width: 100px;
    height: 50px;
    top: 233px;
    right: 25px;
    background-color: red;
    z-index: 2;
}

$(function() {
    $(window).scroll(function() {
        setTimeout(updateFloat, 50);        
    });
});

var updateFloat = function() {
    var mainTop = $('.main').offset().top;
    var scrollPos = $(window).scrollTop();
    var floatOffset = 25;
    var newTop = (scrollPos > mainTop) 
        ? floatOffset + 'px' 
        : mainTop + floatOffset - scrollPos + 'px';

    $('.float').css('top', newTop);;
}

我对如何解决这个问题感到有点失落。我尝试更新边距而不是顶部位置，以及在绝对定位和固定定位之间切换。也许有一种方法可以使用css过渡来帮助，但是我还没有设法让它们在这里工作。

Answer 1

您可以将position: sticky添加到您的CSS中，以便粘性由支持它的浏览器完成（根据caniuse.com，只有Firefox和Safari）。

你总是被限制在滚动事件的保真度上，所以你可能总是看到一点延迟，但你可以通过缓存值而不是每次updateFloat（）时查找它们来改善一些事情。调用。例如

var mainElement = $('.main');
var windowElement = $(window);
var floatElement = $('.float');

var updateFloat = function() {
    var mainTop = mainElement.offset().top;
    var scrollPos = windowElement.scrollTop();
    var floatOffset = 25;
    var newTop = (scrollPos > mainTop) 
        ? floatOffset + 'px' 
        : mainTop + floatOffset - scrollPos + 'px';

    floatElement.css('top', newTop);
}

问题也可能与浏览器尝试重新布局页面有关，因为.float元素与其他div在同一个渲染层中。您可以通过添加一个样式来解决这个问题，该样式告诉浏览器将.float元素放在自己的渲染层中（由于GPU合成导致渲染速度更快）。最常见的诀窍是在您的样式中添加transform: translateZ(0);，但也有一些由多个浏览器支持的建议样式will-change。所以你应该像这样更新你的CSS

.float {
    will-change: scroll-position;
    transform: translateZ(0);
    position: fixed;
    width: 100px;
    height: 50px;
    top: 233px;
    right: 25px;
    background-color: red;
    z-index: 2;
}

请注意，添加渲染层会增加内存使用量，因此不要过度使用它。它有时也会影响其他功能，例如文本的抗锯齿。

在无响应页面上更新滚动事件上固定元素的位置

1 个答案: