【问题标题】：iPhone 6 - position: fixed - not loading until stop scrollingiPhone 6 - 位置：固定 - 直到停止滚动才加载
【发布时间】：2017-07-15 17:18:45
【问题描述】：

我已经阅读了这个网站上的很多帖子，但没有什么对我有用，我不知道为什么。

我正在尝试制作一个菜单，当您滚动过去时“粘贴”到页面顶部，反之亦然（当您向上滚动时停止粘贴）

Javascript

 $(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 上进行了测试。safari 和 chrome，所有结果都相同。

【问题讨论】：

为什么不只给标题position: fixed，然后使用JavaScript jQuery 给<body> 一个标题高度的填充顶部。它总是看起来很正常。如果你想给它添加一个类，如果windows scrollTop() > 0，则以它为基础。
如果菜单应该始终位于页面顶部，那么您所说的将起作用。在我的情况下，它不是，只有在你滚动过去之后才会出现在顶部。
ok so on window scroll 检查标题滚动顶部是否小于窗口滚动顶部，如果是，则将固定类和填充添加到正文，如果不从正文中删除类和填充。跨度>
我不就是这样吗？问题是，当我在 iOS 中滚动时将“固定”类添加到元素时，它不会显示在屏幕上，直到您停止滚动并将手指从屏幕上移开。问题不在于代码不起作用，只是在您停止滚动之前它不起作用，这只是 iOS 设备上的问题。最后，我可能只需要更改布局方式并将菜单默认设置在顶部。
我过去曾构建过利用此功能的应用程序并且可以正常工作。也许它是你的滚动功能。我会通过窗口事件发布一个答案。

标签： javascript css iphone

【解决方案1】：

问题在于position:fixed。这似乎在移动设备上专门针对 Safari 存在已知问题。经过几个小时的搜索，我相信我可能已经能够解决这个问题。

我使用的解决方案是将position:-webkit-sticky 用于iOS safari，将position:sticky 用于桌面浏览器。可以在此处找到有关此属性的更多文档：

http://caniuse.com/#feat=css-sticky

你能试试下面的代码吗：

CSS：

  #FloatingMenu.fixed {
     top: 0;
     left: 0;
     z-index: 1;
     width: 100%;
     background-color: black;
     color: white;
  }
  #FloatingMenu {
     position: -webkit-sticky;
     position: sticky;
     background-color: lightgray;
     color: black;
     width: 100%;
     height: 60px;
     text-align: center;
     padding-top: 18px;
     font-weight: 800;
  }

JS：

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

请注意，我已经完全删除了 fixed 属性并将sticky 属性应用于#FloatingMenu 选择器本身。似乎在我的 iOS 模拟器 Safari 和 iPhone 6 Safari 以及我桌面上的 Chrome 和 Safari 上对我有用。

可以在此处找到此修复的简单工作示例：Link

希望这会有所帮助。干杯。

【讨论】：

@Maddy 你可以检查一下这个 URL 并查看：www.inertiamusicproductions.com/testing。我通过一个简单的实现让它在那里工作。另外，您能否将您的页面托管在某个地方，以便我也可以帮助调试？谢谢。
好的，34.198.96.255这是在iphone 6中检查导航栏的页面
@Maddy 非常感谢。你看到它在我分享的那个页面上工作了吗？
@Maddy 当我尝试该 URL 时，我看到 top 属性的多个控制台错误。这是一个WordPress网站？非常难调试！你能帮我知道我可以在哪里更改 CSS 类吗？
让我们continue this discussion in chat。

【解决方案2】：

您不应该为滚动添加任何事件侦听器，因为它会产生多个错误 - 可能会使您的浏览器崩溃。这是您需要更改的第一件事：

JS：

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

您需要修复的第二件事是您的“功能滚动”。没错：只是一个被 DOM 元素调用的函数。但是如果你的事件不是由 DOM 元素触发呢？也许这就是你的问题！所以你甚至可以尝试为滚动添加事件监听器来解决这个问题，但我不推荐。

JS

      function Scroll() {
           var y = $('body').scrollTop();
           if (y >= top) {
               $('#FloatingMenu').addClass('fixed');
           } else {
               $('#FloatingMenu').removeClass('fixed');
      }

注意：

如果 #FloatingMenu 的第一个可滚动父级不是 <body>，您应该修复 $('body')。

【讨论】：

【解决方案3】：

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

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);
}

【讨论】：