iPhone Safari 上的固定标题背景问题答案

【问题标题】：Issue with fixed header background on iPhone's SafariiPhone Safari 上的固定标题背景问题
【发布时间】：2018-11-23 21:20:27
【问题描述】：

我在 iPhone 的 Safari 上的修复标头出现问题。当窗口向下滚动时，header 会得到“fixed_header”类，它也会给它添加一个白色背景（原始背景颜色是透明的），并将里面的其他元素更改为更深的颜色。

它在 Chrome 上完美运行，但在 Safari 中，当我向上滚动时，.up 类保持其白色背景，而其中的所有元素都恢复到原始状态。我认为这可能与 safari 在滚动时更改其地址栏高度这一事实有关，这可能会延迟或混淆 js。

我该如何解决？

 $(window).on("load resize", function(){
            var headerTop = $(".header").offset().top;
            var headerHeight = $(".header").outerHeight();
            $(window).on("scroll", function(){
                var scrollTop = $(window).scrollTop();
                if(scrollTop > headerTop){
                    $('.header').addClass("fixed_header");
                } else {
                    $('.header').removeClass("fixed_header");
                }
            });
        });

这是css：

.fixed_header {
      background-color: white;
      position: fixed;
      top: 0;
      z-index: 999;
      @include SP {
        background-color: transparent;
        .up {
          background-color: white;
        }
        h1 {
          opacity: 0;
          position: absolute;
        }
        .logo {
          background-image: url("../images/common/logo_sp_sm_dark.png");
        }
        .contact_btn {
          background-image: url("../images/common/btn_contact_dark.png");
        }
        .menu-trigger span {
          background-color: #1e2328;
        }
      }
    }

【问题讨论】：

标签： javascript css iphone safari

【解决方案1】：

我通过在背景更改上添加延迟解决了我的问题，这将弥补 Safari 的地址栏调整大小造成的差距。

var moven = true;
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 20 && moven == true) {
             $("header").addClass("fixed_header");
        } else {
             $("header").removeClass("fixed_header");
        }
    });

【讨论】：