Jquery 固定标题在滚动，但子菜单需要按下内容

我需要一个level1菜单的固定标题，但是当单击level1时，子菜单需要向下推页面的其余部分

如果我使标题位置固定，内容将不会被按下，子菜单将与内容（以及菜单）重叠

人们通常如何解决这个问题？谢谢

js:

html:

---

这个解决方案怎么样

HTML

<div class="page">
  <div class="header">
    <div class="menu">menu</div>
    <div class="submenu">submenu</div>
    <div class="header-red">Header</div>
  </div>
  <div class="content">
    <p>content needs to be pushed down</p>
  </div>
</div>

JS

.header{
    position:fixed;
    width:100%;
}

.header-red {
    background: red;
    height: 70px;
}
.menu{
    height:70px;
    background:blue;
}
.submenu{
    background:yellow;
    height: 0;
    opacity: 0;
    transition: all 0.3s ease-in;
}

.show {
    height: 70px;
    opacity: 1;
}

.content{
    background: purple;
    height:300px;
    width:100%;
}
.content p{
    color:black;
}
.page{
    height:3000px;
}

$(".menu").on("click",function(){
  $(".submenu").toggleClass('show');
});

编辑：

解决方案2-非固定收割台

---

解决方案3-标题更改

此版本有一个固定的标题，其中子菜单向下推送内容

为了使它正常工作，我稍微更改了css，其中

.menu

是固定的，而

.header

得到了

填充

以将非固定内容向下移动到视图中

$（.menu”）。在（“单击”，函数（）{
$（“.submenu”）.slideToggle（）；
})

html，正文{
保证金：0；
}
.标题{
背景：红色；
位置：相对位置；
填充顶部：70px；
}
.菜单{
位置：固定；
排名：0；
左：0；
高度：70像素；
宽度：100%；
背景：蓝色；
}
.子菜单{
高度：70像素；
背景：黄色；
显示：无；
}
.内容{
背景：紫色；
高度：300px；
宽度：100%；
}
.内容p{
颜色：黑色；
}
.第页{
高度：3000px；
}

菜单
子菜单
内容需要向下推

如果您没有排除第三方LIB，则可以选择引导。给你一个很好的导航栏。看看你的例子，我想你总是希望内容在标题下…对吗？当你说“1级菜单的固定标题”时，你是说“固定且始终可见”，即使页面内容滚动，或者只是它的高度是固定的？但OP希望页面的其余部分在您的演示中向下推，只有页眉高度改变。当您滚动时，您的页眉或菜单固定在窗口顶部时，如何向下推页面内容。这没有意义。通过将边距或填充设置为content@Gene你能创作小提琴并展示你的意思吗？下一个答案就是

<div class="page">
  <div class="header">
    <div class="menu">menu</div>
    <div class="submenu">submenu</div>
    <div class="header-red">Header</div>
  </div>
  <div class="content">
    <p>content needs to be pushed down</p>
  </div>
</div>

.header{
    position:fixed;
    width:100%;
}

.header-red {
    background: red;
    height: 70px;
}
.menu{
    height:70px;
    background:blue;
}
.submenu{
    background:yellow;
    height: 0;
    opacity: 0;
    transition: all 0.3s ease-in;
}

.show {
    height: 70px;
    opacity: 1;
}

.content{
    background: purple;
    height:300px;
    width:100%;
}
.content p{
    color:black;
}
.page{
    height:3000px;
}

$(".menu").on("click",function(){
  $(".submenu").toggleClass('show');
});