在追踪

Question

我正在为您在amazon.com

中看到的修复标头做原型

因此，如果您向下滚动页面到一定数量的像素，标题将变为固定并保持在浏览器的顶部。

这是我到目前为止 -

＆＃13;

＆＃13;

var wrap = $("#wrap");

wrap.on("scroll", function(e) {
    
  if (this.scrollTop > 120) {
    wrap.addClass("fix-header");
  } else {
    wrap.removeClass("fix-header");
  }
  
});

＆＃13;

.container{
  width: 100%;
  height:480px;
  margin: 0 auto;
  background: #eee;
  overflow: auto;
  position: relative;
}

.header {
  width: 100%;
  height: 90px;
  background: pink;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 20px;
  
}

.header p {
  display: inline-block;
  line-height: 90px;
  font: 300 30px Oswald;
  
}

.block {
  width: 100%;
  height: 600px;
  margin-top: 20px;
  background: grey;
}

.fix-header .header {
  position: fixed;
  top: 0;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap" class="container">
  
  <div class="header">
    <p>This is the Header</p>
  </div>
  
  <div class="block">
  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;

http://codepen.io/anon/pen/YwbpxX

所以问题就在于此问题，此固定标头仅适用于overflow: auto的{​​{1}}。而且我必须将.container的高度设置得比实际包含的高。

我还注意到，如果我们滚动页面并且固定标题将其宽度扩展到滚动条，如下图所示。

我如何 -

1. 使固定的标题在没有较小高度容器的情况下工作。
2. 固定标题不会在滚动条上方延伸。

谢谢！

Answer 1

您应该在body而不是#wrap上执行您的操作，这样您就不必更改overflow或.container的高度。