Question

我试图在网上找到一些相关内容，虽然这是一个小问题，但我觉得它会影响网站体验。此外，根据浏览器或计算机的速度，您可能不会注意到此问题。

问题是我的网站上有一个固定的标题。当向上或向下滚动时，它似乎滞后或拖动...它保持固定在顶部，但是当你滚动它时，它会以不同的速度滚动和拖动。

您可以亲身体验here。

它正在努力 - 似乎只发生在投资组合页面上，而不是主页上。

Answer 1

我在Chrome上遇到了同样的问题。通过添加

解决了这个问题

-webkit-backface-visibility: hidden;

到样式表中的header元素;

关于这一点很好article。

希望这有帮助。

Answer 2

这种情况可能会发生，因为您正试图在窗口滚动事件上做一些事情。

每次滚动事件触发时你都会有一个视差滚动功能，用parallax类修改元素（尽管似乎不是那个类的任何实际元素）。您还要检查是否添加更改标题背景的类。

您可以做的一件事就是在实际的滚动功能中尽量少做。

//Menu contrast happens when user scrolls down

// Save 4 jQuery select operations and 2 function calls per scroll event
var myNav = $('nav');
var heightDiff = $('#bg1').height() - myNav.height();

// Use global variables in the scroll function
$(window).scroll(function () {
    if (window.pageYOffset < heightDiff)
    {
        myNav.removeClass('contrast');
    }
    else
    {
        myNav.addClass('contrast');
    }
});

你也可以用视差循环做类似的事情。

// Save 2 jQuery select operations and one function call per scroll event
var htmlHeight = $('html').height();
var parallaxElems = $('.parallax');

$(window).scroll(function () {
    var scrollpercentage = window.pageYOffset/htmlHeight;
    var moveoffset = 350*scrollpercentage; // set parallax coeficcient
    parallaxElems.css('background-position-y',(50-moveoffset)+'%'); 
});

请注意，如果您使用JavaScript向DOM添加新元素或修改现有元素，则可能需要再次计算全局变量。

滚动时标题滞后

2 个答案: