我已经阅读了该站点上的很多帖子,但没有任何内容对我有用,我不确定为什么。

我正在尝试制作一个菜单,使其在滚动到页面顶部时“粘贴”到页面顶部,反之亦然(当您向上滚动时会停止粘贴)

Java脚本

 $(document).ready(function(){
      var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100))
      document.addEventListener("scroll",Scroll,false);
      document.addEventListener("gesturechange",Scroll,false);
      function Scroll() {
           var y = $(this).scrollTop();
           if (y >= top) {
               $('#FloatingMenu').addClass('fixed');
           } else {
               $('#FloatingMenu').removeClass('fixed');
      }

的CSS
 #FloatingMenu.fixed {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1;
     width: 100%;
     background-color: black;
     color: red;
  }
  #FloatingMenu {
     background-color: red;
     color: black;
     width: 100%;
     text-align: center;
  }

我尝试进行重新绘制,尝试停止“惯性”滚动(在iOS的Chrome上无法停止),无论哪种方式,我尝试过的一切都具有相同的结果。在PC或Android上均可完美运行,但在iPhone上,菜单将不会重新绘制,并且在滚动停止且手指从屏幕上移开之前不会“粘在”顶部。

有没有解决的办法?我正在阅读的所有内容都表明,有一个解决方案对我而言没有任何改变,但并不是所有的解决方案。

奇怪的是,如果向上滚动(菜单已经停留在顶部)并且滚动过去,它会自动松开(即使在滚动时)也可以正常工作。

它唯一的问题是何时“重新绘制”“固定”菜单。

我希望有一个解决方案。一切都表明,在iOS 8之后,它已修复(并且我正在10+上进行测试),但滚动时不会显示菜单,直到您停下来放手为止。在iPhone 6和iPad Air 2上进行了测试。

最佳答案

我想我解决了这个问题。
这很有趣。
只需添加样式转换

transform: scaleX(1);

或者
transform: translateX(0);

这就是全部
.fixedSidebar{
    position: fixed;
    right:0;
    border:1px solid gray;
    height:100vh;
    width:17%;
    max-width:70px;
    transform: scaleX(1);
}

关于javascript - iPhone 6-位置: fixed - not loading until stop scrolling,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42446023/

10-09 23:46
查看更多