javascript 使用滚动动画在站点中闪烁固定标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20905941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blinking fixed header in site with scrolling animation
提问by Dom Ramirez
So I'm putting a website together which will have a few css3 animations triggered on the scroll event. About halfway through writing the scrolling animations, I'm noticing a lot of blinking on the page's header and other position:fixed elements.
所以我把一个网站放在一起，它会在滚动事件上触发一些 css3 动画。大约在编写滚动动画的一半时，我注意到页面的标题和其他位置上有很多闪烁：固定元素。
Is there something I can do to minimize this blinking? (Ideally without jQuery)
我可以做些什么来减少这种闪烁？（理想情况下没有 jQuery）
回答by Dom Ramirez
Well, it looks like this issue is probably isolated to chrome and the speed at which fixed positioned elements render when CSS animations are firing off during scroll.
好吧，看起来这个问题可能与 chrome 和固定定位元素在滚动期间触发 CSS 动画时呈现的速度有关。
I wanted to see if this little trickwould hardware-accelerate elements that weren't actually the subject of a CSS animation in chrome. Turns out it did. :)
我想看看这个小技巧是否会硬件加速那些实际上不是 chrome 中 CSS 动画主题的元素。事实证明确实如此。:)
Here's the solution:
这是解决方案：
.topbar
{
-webkit-transform: translate3d(0,0,0);
}
回答by rohan parab
There will be somethingg wrong with your javascript code. I faced the same problem
你的 javascript 代码会有问题。我遇到了同样的问题
for eg :
例如：
This was the code with blinking div :
这是带有闪烁 div 的代码：
window.onscroll = function () {
var sticky = document.getElementById("sticky");
var value = sticky.offsetTop;
if(window.pageYOffset > value){
sticky.classList.add("sticky");
console.log("sticky");
}else{
sticky.classList.remove("sticky");
console.log("nonsticky");
}
}
The problem was that i declared variable in on scroll function
问题是我在滚动函数中声明了变量
The fix :
修复：
var sticky = document.getElementById("sticky");
var value = sticky.offsetTop;
window.onscroll = function () {
if(window.pageYOffset > value){
sticky.classList.add("sticky");
console.log("sticky");
}else{
sticky.classList.remove("sticky");
console.log("nonsticky");
}
}
回答by thex
The transform: translate3d(0,0,0)did not fix the issue in my case for e.g. BS navbar. But instead I stumbled over a different solution which fixed the problem for AOS, Animate.css and also WOW.js. In my case all elements with position: fixedhad erratic behaviour when scrolling on mobile (touch devices) through the site.
将transform: translate3d(0,0,0)在我的案例如BS没有解决问题navbar。但相反，我偶然发现了一个不同的解决方案，它解决了 AOS、Animate.css 和 WOW.js 的问题。就我而言，position: fixed在移动设备（触摸设备）上滚动浏览网站时，所有元素都具有不稳定的行为。
An approach I found hereand heredid completely solve the existing problems. Add overflow-x: hidden;to your bodya/o sectionelements that contain the animation.
我在这里和这里找到的一种方法确实完全解决了现有的问题。添加overflow-x: hidden;到包含动画的bodya/osection元素。
body { overflow-x: hidden; }
or
或者
section { overflow-x: hidden; } //might be a different container element
Finally my BS navbar is no longer affected by any animations.
最后，我的 BS 导航栏不再受任何动画的影响。
回答by priyanka ahire
**Blinking Fixed Header issue I am facing only in Firebox. Animation property not supported by Firebox?**
*In below code i am applying tranform property to all column who has freeze_vertical class*
var fixed_vertical_elts = document.getElementsByClassName(table_class + " freeze_vertical");
for (i = 0; i < fixed_vertical_elts.length; i++) {
fixed_vertical_elts[i].style.webkitTransform = translate_y;
fixed_vertical_elts[i].style.transform = translate_y;
fixed_vertical_elts[i].style.background = "#fff";
}
*but one thing I observed once you open a debug mode, from that moment to until reload,fixed header not blink.*
Thanks in adavance
