如何使用jQuery slidetoggle方法使固定导航栏向下推送内容，而不是重叠内容

我想知道是否有人能帮我找到这个问题的解决方案。我目前正在设计一个响应式移动网页，目前我有一个固定的滚动导航栏，带有扩展菜单的jQuery幻灯片切换方法。

我的问题是，当我点击"菜单触发器"按钮时，菜单与下面的内容重叠，而不是像我希望的那样按下其余内容

我试着在这里和其他地方寻找答案，但我找不到确切的答案。如果这已经发布了，我很抱歉。

我没有在这篇文章上发布任何代码，但这里有一个假设的jfiddle，我复制了同样的问题。我希望有人能帮忙，我已经准备好把我的头发扯掉了！！

jQuery(document).ready(function() {
	jQuery(".menu-trigger").click(function() {
		jQuery(".menu-bar ul").slideToggle();
		
	});
});

/*For Scrolling Purposes*/
body {
   background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
   ) repeat;
    height: 2000px;
}
.menu-bar {
  position: fixed;
  top: 0;
  width: 100%;
  background: orange;
}
.menu-bar ul {
  display: none;
}
.content {
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <!--Menu Bar Div-->
  <div class="menu-bar">
    <div class="menu-trigger">
      <p>
        Button
      </p>
    </div><!--/Menu Trigger-->
      <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
      </ul>
  </div><!--/Menu Bar-->
  
  <!--Content Div-->
  <div class="content">
    <ul>
      <li>Some Content</li>
      <li>Some Content</li>
      <li>Some Content</li>
      <li>Some Content</li>
    </ul>
  </div><!--/Content-->
  
</body>

这是jfiddle链接。https://jsfiddle.net/Lq7qqnn9/

背景：HTML和CSS做得不错，javascript做得不太好！

一种选择是在内容上使用占位符项而不是边距。也就是说，在你的固定挡块后面加一个挡块，用它的固定覆盖层保持高度。

jQuery(document).ready(function() {
  jQuery(".menu-trigger").click(function() {
    $(".menu-placeholder").css("height", $(".menu-bar").height());
    jQuery(".menu-bar ul").slideToggle({
      progress: function() {
        $(".menu-placeholder").css("height", $(".menu-bar").height());
      }
    });
  });
});

/*For Scrolling Purposes*/
body {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
) repeat;
  height: 2000px;
}
.menu-placeholder {
  width: 100%;
  height: 50px;
}
.menu-bar {
  position: fixed;
  top: 0;
  width: 100%;
  background: orange;
}
.menu-bar ul {
  display: none;
}
.content {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <!--Menu Bar Div-->
  <div class="menu-bar">
    <div class="menu-trigger">
      <p>
        Button
      </p>
    </div>
    <!--/Menu Trigger-->
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <!--/Menu Bar-->
  <!--Content Div-->
  <div class="menu-placeholder"></div>
  <div class="content">
    <ul>
      <li>Some Content</li>
      <li>Some Content</li>
      <li>Some Content</li>
      <li>Some Content</li>
    </ul>
  </div>
  <!--/Content-->
</body>

相关内容

最新更新

热门标签：