我在Adobe Muse中建立了一个网站,当滚动浏览徽标时会出现一个粘性标题。这在Chrome和Firefox上完美运行,即使在iPad Safari上也是如此,但是,它在桌面Safari上效果不佳,并且在单击平滑滚动到锚点的锚链接时会出现严重抖动。
请参阅下面的示例网站:
http://mattstest03.businesscatalyst.com/index.html
点击'与我们联系'在Firefox / Chrome上,粘贴标题在整个平滑滚动中看起来很棒。在Safari上,它在滚动过程中会打开/关闭。这是闪烁效果的GIF:
这是我的代码:
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');
}
}
请注意,这与JavaScript代码的滚动部分(第4行)无关,因为我已将其删除以进行测试,问题仍然存在。
我尝试了几个CSS"修复"关于sticky-bar
ID,例如-webkit-transform: translate3d(0,0,0)
和-webkit-translateZ(0)
,但我没有任何运气。有人可以提供见解吗?谢谢。
答案 0 :(得分:3)
position: fixed
在ios中效果不佳know issue。好像到现在为止还没有修好。为元素设置translate3d(0,0,0)
是一种四处走走,但它并不完美。滚动时仍然很奇怪。所以我的建议是使用position: absolute
代替。只需将您的栏移出内容容器,然后将其position: absolute
。请参阅下面的代码snipet:
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>