Question

我正在使用此代码：

var offset = $(".sticky-header").offset();
var sticky = document.getElementById("sticky-header")

$(window).scroll(function() {

  if ($('body').scrollTop() > offset.top) {
    $('.sticky-header').addClass('fixed');
  } else {
    $('.sticky-header').removeClass('fixed');
  }


});

body {
  margin: 0px;
  padding: 0px;
}
.clear {
  clear: both;
}
.container {
  height: 2000px;
}
.cover-photo-container {
  width: 700px;
  height: 100px;
  margin-bottom: 20px;
  background-color: red;
}
.small-box {
  width: 163px;
  height: 100px;
  border: 1px solid blue;
  float: left;
}
.sticky-header {
  width: 700px;
  height: 50px;
  background: orange;
}
.fixed {
  position: fixed;
  top: 0px;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="container">
  <div class="cover-photo-container">Please scroll</div>
  <div class="small-box"></div>
  <div class="small-box"></div>
  <div class="small-box"></div>
  <div class="small-box"></div>
  <div class="clear">
    <div>
      <div class="sticky-header">This needs to be fixed when hits top of screen</div>
    </div>
  </div>
</div>

创建固定标头。它适用于jsFiddle，但不适用于我的Safari浏览器。我已经检查了浏览器中的代码并且没有被任何内容覆盖，因为除了您可以看到的内容之外，页面上没有任何内容。

有什么建议可以解决这个问题吗？

Answer 1

只是一个疯狂的猜测，也许某些浏览器中的窗口/文档对象定义了一个＆＃34;偏移＆＃34;所以我们改变它，试试这个：

var myoffset = $(".sticky-header").offset();
$(window).scroll(function() {
  $('.sticky-header').toggleClass('fixed', ($('body').scrollTop() > myoffset.top));
});

Sticky header在Jsfiddle中工作，但不在浏览器

1 个答案: