Javascript 固定位置元件性能差

当我用Chrome浏览网页时，我的网站上有一个固定的元素

当上下滚动页面时，元素会闪烁并复制自身

通常，当面对这个问题时，我通常能够用一个简单的z指数来解决这个问题，但这对这个特殊问题没有任何影响

所讨论的元素是左侧的黑色滚动元素

以下是简化小提琴中复制问题的代码：

// HTML

 <ul id="et-float-menu">
     <li class="et-float-menu-item1">
        <a id="scrollUp">
            <span><img /></span>
        </a>
    </li>
    <li class="et-float-menu-item2">
        <a id="scrollDown">
            <span><img /></span>
        </a>
    </li>
</ul>

<div class="jumptosection selected" id="section1">
    <h2>Section 1</h2>
</div>    
<div class="jumptosection" id="section2">
    <h2>Section 2</h2>
</div>    
<div class="jumptosection" id="section3">
    <h2>Section 3</h2>
</div>    
<div class="jumptosection" id="section4">
    <h2>Section 4</h2>
</div>

// JS
function changeSelection(sectionFrom, sectionTo) {
    if(sectionTo.length > 0) {
        sectionFrom.removeClass("selected");
        sectionTo.addClass("selected");
        jQuery("body").animate({scrollTop: sectionTo.offset().top});
    }
}

jQuery(document).on("click", "#scrollDown", function(){
    var currentSection = jQuery(".selected");
    var nextSection = currentSection.next(".jumptosection");

    changeSelection(currentSection, nextSection);

    return false;
});

jQuery(document).on("click", "#scrollUp", function(){
    var currentSection = jQuery(".selected");
    var prevSection = currentSection.prev(".jumptosection");

    changeSelection(currentSection, prevSection);

    return false;
});

// CSS

.jumptosection {
    height: 200px;
    background-color:#e8e8e8;
}

#et-float-menu {
position: fixed;
z-index: 11;
left: 0;
top: 45%;
background-color: #000;
padding: 20px 10px 10px 15px;
margin: 0;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}

#et-float-menu a {
padding: 0;
clear: both;
float: left;
margin-bottom: 10px;
color: #fff;
}

#et-float-menu a:hover { color: #b2b2b2; transition: color 300ms ease 0s; }

#et-float-menu li {
display: block;
margin-left: 0;
}


.et-float-menu-item a { display: inline-block; font-size: 24px; position: relative; text-align: center; transition: color 300ms ease 0s; color: #fff; text-decoration: none; }
.et-float-menu-item a:hover { color: #a0a0a0; }
    .et-social-icon span { display: none; }
.et-float-menu-item1 a:before { content: '↑';font-size:22px; }
.et-float-menu-item2 a:before { content: '↓';font-size:22px; }

//HTML






第一节
第二节
第三节
第四节
//JS
功能更改选择（sectionFrom、sectionTo）{
如果（sectionTo.length>0）{
sectionFrom.removeClass（“选定”）；
sectionTo.addClass（“选定”）；
jQuery（“body”）.animate（{scrollTop:sectionTo.offset（）.top}）；
}
}
jQuery（document）.on（“单击”，“向下滚动”，函数（））{
var currentSection=jQuery（“.selected”）；
var nextSection=currentSection.next（“.jumptosection”）；
更改选择（当前节，下一节）；
返回false；
});
jQuery（document）.on（“单击”，“滚动”，函数（））{
var currentSection=jQuery（“.selected”）；
var prevSection=currentSection.prev（“.jumptosection”）；
变更选择（当前区段、前区段）；
返回false；
});
//CSS
.jumptosection{
高度：200px；
背景色：#e8e8e8；
}
#et浮动菜单{
位置：固定；
z指数：11；
左：0；
最高：45%；
背景色：#000；
填充：20px 10px 10px 15px；
保证金：0；
-webkit边框右上半径：8px；
-webkit边框右下半径：8px；
-moz边框半径右上角：8px；
-moz边框半径右下角：8px；
边框右上角半径：8px；
边框右下半径：8px；
}
#et浮动菜单a{
填充：0；
明确：两者皆有；
浮动：左；
边缘底部：10px；
颜色：#fff；
}
#et浮点菜单a:悬停{color:#b2b2b2b2；过渡：颜色300ms ease 0s；}
#浮动菜单{
显示：块；
左边距：0；
}
.et float菜单项a{显示：内联块；字体大小：24px；位置：相对；文本对齐：居中；过渡：颜色300毫秒；颜色：#fff；文本装饰：无；}
.et float菜单项a:悬停{颜色：#A0；}
.et社交图标span{display:none；}
.et-float-menu-item1 a:在{content:'之前↑';字体大小：22px；}
.et-float-menu-item2 a:在{content:'之前↓';字体大小：22px；}

---

有人知道这个问题的原因和可能的解决方法吗？

我设法在Chrome中复制了这个问题，并使用这个方法添加了

-webkit backface visibility:hidden到UL元素，似乎解决了问题。。至少对我来说。你能试试吗

可以在上面的链接上找到对该问题的良好解释，并可以找到对该问题的更深入的审查

摘自上述链接：

…添加背面可见性：隐藏；到固定位置元素。
这阻止了画卷上的绘画。所以，我过了一个愉快的假期
我自己的网站的简单解决方案，但我很恼火，我不明白
原因：我有我的怀疑，但没有实际的证据。在这些
我总是做同样的事情；问一个更聪明的人

…当元素重新绘制时，脏矩形计算按
层。因此，如果一个元素位于它自己的层上，那么它不会影响
别的。如果你提升了一个固定的标题——比如——那么当内容
出现在页面底部的只有
需要油漆。如果没有升级，则需要删除标题
在页面顶部重新绘制。你可能想知道为什么我们不这么做
自动提升固定位置元素。答案是：我们有
对于高DPI屏幕，但我们不支持低DPI，因为我们会失败
文本上的亚像素抗锯齿，这不是我们想要的
违约在高DPI屏幕上，你无法分辨，因此在那里是安全的

我看不出有这种行为。你用的是什么浏览器和版本？没错，这不会发生在小提琴上。。。这就是让我困惑的地方。这发生在Mac的最新版本Chrome上。我设法在Chrome上复制了这个问题，并使用它添加了
-webkit backface visibility:hidden到UL元素，似乎解决了问题。。至少对我来说。你能试一试吗。@DavidCoggins-我建议你尝试添加一些关于这个问题的代码来说明这个问题（并保留fiddle链接和指向你网站的链接）。这样做的目的是使问题能够自给自足，这样，如果JSFIDLE或您的站点出现故障，人们仍然可以获得足够的信息，以确定问题/答案是否能帮助他们not@DavidCoggins谢谢，我已经在下面添加了答案和另一个详细说明问题的链接。很高兴你能帮忙。