Question

我有一个固定的标题和菜单栏，当我向下滚动容器时，有一个容器div div不会隐藏在菜单栏下方，如下图所示是我正在使用的jquery代码。请帮助解决我的问题。

var header= $('.header');
var start_div = $(header).offset().top;


var menu_div = $('.menu');
var menu = $(menu_div ).offset().top;

  $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop();
        $(header).css('position',((p)>start_div ) ? 'fixed' : 'static');
        $(header).css('top',((p)>start_div ) ? '0px' : '');
        $(header).css('width','840px');
        $(header).css('min-height','108px');

 });

$.event.add(window, "scroll", function() {
   var p = $(window).scrollTop()+100;
   $(menu_div).css('position',((p)>menu) ? 'fixed' : 'static');
   $(menu_div).css('top',((p)>menu) ? '110px' : '');
   $(menu_div).css('width','575px');
   $(menu_div).css('height','57px');
 });

enter image description here

Answer 1

除非我遗漏了一些东西，否则你不需要jQuery甚至JS来做这件事。

检查代码段（codePen here）

html, 
body {
  width: 100%;
  height: 100%;
  background-color: white;
}

.header-wrapper {
  top: 0;
  right: 0;
  left: 0;
  position: fixed;
  height: 160px;
  background-color: white;
}

.header {
  background-color: cyan;
  height: 100px;
  width: 100%;
}

.menu {
  width: 100%;
  height: 50px;
  background-color: green;
  margin-top: 10px;
}

.content {
  color: #fff;
  background-color: black;
  margin-top: 170px; /* same as height of header + nav + margins + 10px for coolness*/
}

<body>
  <div class="header-wrapper">
    <div class="header">Blue Header</div>
    <div class="menu">Green Menu</div>
  </div>
  <div class="content">
    My content<br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    blabla
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    blabla
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</body>

Answer 2

使用css z-index属性。

.header, .menu { 
    z-index: 2
} 
.container {
    z-index: 1
}

http://www.w3schools.com/cssref/pr_pos_z-index.asp

使用jquery和css隐藏菜单栏div下面的容器div

2 个答案: