Question

我想知道是否有人可以帮我找到解决这个问题的方法。我目前正在设计一个响应式移动网页，我目前在滚动时有一个固定的导航栏，带有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！

Answer 1

一种选择是在内容中使用占位符项而不是边距。 I.E.在固定块后面添加一个块，用它固定覆盖层来保持高度。

＆＃13;

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());
      }
    });

  });

});

＆＃13;

/*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 {}

＆＃13;

<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>

＆＃13;

如何使用jQuery slidetoggle方法按下内容而不是重叠内容来制作固定导航栏？

1 个答案: