0

我在 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;
        }
      }
    }
4

1 回答 1

0

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

var moven = true;
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 20 && moven == true) {
             $("header").addClass("fixed_header");
        } else {
             $("header").removeClass("fixed_header");
        }
    });
于 2018-06-15T07:26:33.833 回答