仅在锚定滚动时在Safari桌面上闪烁的粘滞标头

Question

我在Adobe Muse中建立了一个网站，当滚动浏览徽标时会出现一个粘性标题。这在Chrome和Firefox上完美运行，即使在iPad Safari上也是如此，但是，它在桌面Safari上效果不佳，并且在单击平滑滚动到锚点的锚链接时会出现严重抖动。

请参阅下面的示例网站：

http://mattstest03.businesscatalyst.com/index.html

点击＆＃39;与我们联系＆＃39;在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＆＃34;修复＆＃34;关于sticky-bar ID，例如-webkit-transform: translate3d(0,0,0)和-webkit-translateZ(0)，但我没有任何运气。有人可以提供见解吗？谢谢。

Answer 1

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>