仅在锚定滚动时在Safari桌面上闪烁的粘滞标头 [英] Sticky Header Flickering on Safari Desktop Only When Anchor Scrolling
问题描述
我在Adobe Muse中建立了一个网站，当滚动浏览徽标时会出现一个粘性标题。这在Chrome和Firefox上完美运行，即使在iPad Safari上也是如此，但是，它在桌面Safari上运行效果不佳，并且在单击平滑滚动到锚点的锚点链接时会出现严重抖动。
请参阅下面的示例网站：
这是我的代码：
CSS
＃sticky-bar {
display：none;
头寸：固定;
top：0;
左：0;
宽度：100％;
身高：53px;
背景：透明网址（assets / photoshop-eclipse.jpg）重复左上方;
}
/ * Circle Logo * /
＃u73837 {
宽度：57px;
过渡：宽度0.4s，高度0.4s;
-moz-transition：宽度0.4s，高度0.4s;
-webkit-transition：宽度0.4s，高度0.4s;
}
/ * Text Logo * /
＃u56099 {
宽度：229px;
过渡：全部0.4s！重要;
-moz-transition：全部0.4s！重要;
-webkit-transition：全部0.4秒！重要;
}
/ * Sticky联系我们* /
.sticky-contact {
position：fixed！important;
top：9px！important;剩下
：-160px！important;
padding-bottom：4px！important;
margin-top：0！important;
过渡：全部0.4s;
-moz-transition：全部0.4s;
-webkit-transition：全部0.4s;
}
.sticky-contact：在{
内容：我们喜欢谈论之前;
仓位：绝对;剩余
：计算（-100％ - 30px）;
top：8px;
颜色：#eee;
font-family：'Raleway'，'Open Sans';
字体大小：17px;
}
.contact-inner {
margin-top：4px！important;
font-size：17px！important;
过渡：全部0.4s;
-moz-transition：全部0.4s;
-webkit-transition：全部0.4s;
}
/ * Circle Logo Transition * /
.smaller-logo {
position：fixed！important;
top：7px！important;
宽度：40px！important;
身高：40px！important;
}
/ * Normal Circle Logo * /
.normal-logo {
宽度：57px;
身高：57px;
}
/ *较小的文字* /
.smaller-text {
宽度：0！重要;
}
JavaScript
var width = window.innerWidth;
if（width> 1000）{
if（jQuery（window）.scrollTop（）>（jQuery（'＃u106240'）。offset（）。top - 15）） {
//淡入淡出栏
jQuery（'＃sticky-bar'）。css（'display'，'block'）;
//重新定位'联系我们'
jQuery（'＃buttonu206'）。addClass（'sticky-contact'）;
jQuery（'＃u200-4'）。addClass（'contact-inner'）;
//隐藏徽标文本
jQuery（'＃u56099'）。css（'display'，'none'）;
// Animate圈子徽标（CSS）
jQuery（'＃u73837'）。removeClass（'normal-logo'）;
jQuery（'＃u73837'）。addClass（'smaller-logo'）;
} else {
//淡出粘性条
jQuery（'＃sticky-bar'）。css（'display'，'none'）;
//重新定位'联系我们'
jQuery（'＃buttonu206'）。removeClass（'sticky-contact'）;
jQuery（'＃u200-4'）。removeClass（'contact-inner'）;
//显示徽标文本
jQuery（'＃u56099'）。css（'display'，'initial'）;
// Animate圈子徽标（CSS）
jQuery（'＃u73837'）。removeClass（'smaller-logo'）;
jQuery（'＃u73837'）。addClass（'normal-logo'）;
}
}
请注意，这与此无关JavaScript代码的滚动部分（第4行）因为我已将其删除以进行测试并且问题仍然存在。
我已经尝试了几个CSS修复 sticky-bar ID，例如 -webkit-transform：translate3d（0,0,0）和 -webkit-translateZ（0）但我没有运气。有人可以提供见解吗？谢谢。
position：fixed 在ios中运行不正常是知道问题。好像到现在为止还没有修好。为元素设置 translate3d（0,0,0）是一种四处走走，但它并不完美。滚动时仍然很奇怪。所以我的建议是使用 position：absolute 。只需将您的栏移出您的内容容器，然后给它 position：absolute 。请参阅下面的代码snipet：
html，body {width：100％;身高：100％;保证金：0; padding：0;} .fixed-bar {position：absolute;顶部：0;左：0;宽度：100％;身高：50px; background-color：＃123;颜色：#FFF; text-align：center; line-height：50px; z-index：1;}。content {background-color：#ddd;颜色：＃333;宽度：100％; padding-top：50px;位置：绝对;顶部：0;左：0;右：0;底部：0; overflow：auto;}。item {width：100％; text-align：center;身高：200px;身高：30vh; padding-top：10vh;}
< div class = 固定栏>我是固定栏< / div>< div class =content> < div class =item>您的内容在此处显示< / div> < div class =item>您的内容在此处显示< / div> < div class =item>您的内容在此处显示< / div> < div class =item>您的内容在此处显示< / div> < div class =item>您的内容在此处显示< / div>< / div>
I've built a website in Adobe Muse which has a sticky header that appears when scrolling past the logo. This works perfectly on Chrome and Firefox, even on iPad Safari, however, it does not work well on desktop Safari and flickers badly when clicking an anchor link which smoothly scrolls to the anchor.
Please see the example website below:
http://mattstest03.businesscatalyst.com/index.html
When clicking 'Contact Us' on Firefox/Chrome, the sticky header will look great throughout the smooth scroll. On Safari, it flickers on/off during the scrolling. Here's a GIF of the flickering effect:
Here's my code:
CSS
#sticky-bar {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 53px;
background: transparent url("assets/photoshop-eclipse.jpg") repeat left top;
}
/* Circle Logo */
#u73837 {
width: 57px;
transition: width 0.4s, height 0.4s;
-moz-transition: width 0.4s, height 0.4s;
-webkit-transition: width 0.4s, height 0.4s;
}
/* Text Logo */
#u56099 {
width: 229px;
transition: all 0.4s !important;
-moz-transition: all 0.4s !important;
-webkit-transition: all 0.4s !important;
}
/* Sticky Contact Us */
.sticky-contact {
position: fixed !important;
top: 9px !important;
left: -160px !important;
padding-bottom: 4px !important;
margin-top: 0 !important;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
}
.sticky-contact:before {
content: "We'd love to talk";
position: absolute;
left: calc(-100% - 30px);
top: 8px;
color: #eee;
font-family: 'Raleway', 'Open Sans';
font-size: 17px;
}
.contact-inner {
margin-top: 4px !important;
font-size: 17px !important;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
}
/* Circle Logo Transition */
.smaller-logo {
position: fixed !important;
top: 7px !important;
width: 40px !important;
height: 40px !important;
}
/* Normal Circle Logo */
.normal-logo {
width: 57px;
height: 57px;
}
/* Smaller Text */
.smaller-text {
width: 0 !important;
}
JavaScript
var width = window.innerWidth;
if (width > 1000) {
if (jQuery(window).scrollTop() > (jQuery('#u106240').offset().top - 15)) {
// Fade in sticky bar
jQuery('#sticky-bar').css('display', 'block');
// Re-position 'Contact Us'
jQuery('#buttonu206').addClass('sticky-contact');
jQuery('#u200-4').addClass('contact-inner');
// Hide logo text
jQuery('#u56099').css('display', 'none');
// Animate circle logo (CSS)
jQuery('#u73837').removeClass('normal-logo');
jQuery('#u73837').addClass('smaller-logo');
} else {
// Fade out sticky bar
jQuery('#sticky-bar').css('display', 'none');
// Re-position 'Contact Us'
jQuery('#buttonu206').removeClass('sticky-contact');
jQuery('#u200-4').removeClass('contact-inner');
// Show logo text
jQuery('#u56099').css('display', 'initial');
// Animate circle logo (CSS)
jQuery('#u73837').removeClass('smaller-logo');
jQuery('#u73837').addClass('normal-logo');
}
}
Please note, this isn't anything to do with the scrolling section of the JavaScript code (line 4) as I have removed this for testing and the issue persists.
I have tried a couple of CSS "fixes" on the sticky-bar ID such as -webkit-transform: translate3d(0,0,0) and -webkit-translateZ(0) but I've not had any luck. Could anybody please offer insight? Thank you.
position: fixed does not work well in ios is a know issue. Seem like it is not fixed till now. Setting translate3d(0,0,0) for element is a walk around but it is not perfect. It is still weird when you scroll. So my advice is using position: absolute instead. Just move your bar out of your content container, then give it position: absolute. See the code snipet below:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.fixed-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #123;
color: #FFF;
text-align: center;
line-height: 50px;
z-index: 1;
}
.content {
background-color: #ddd;
color: #333;
width: 100%;
padding-top: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.item {
width: 100%;
text-align: center;
height: 200px;
height: 30vh;
padding-top: 10vh;
}
<div class="fixed-bar">
I am a fixed bar
</div>
<div class="content">
<div class="item">
Your content goes here
</div>
<div class="item">
Your content goes here
</div>
<div class="item">
Your content goes here
</div>
<div class="item">
Your content goes here
</div>
<div class="item">
Your content goes here
</div>
</div>
这篇关于仅在锚定滚动时在Safari桌面上闪烁的粘滞标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
