在iPhone的Safari

Question

我在iPhone的Safari上遇到修复标题问题。当窗口向下滚动时，标题会获得类＆＃34; fixed_header＆＃34;，它还会为其添加白色背景（原始背景颜色是透明的），并将内部的其他元素更改为更深的颜色。

它完全适用于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;
        }
      }
    }

Answer 1

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

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