Html 固定侧边栏后，完整的页面标题

对于我的网站，我实现了一个固定的边栏：

我的问题是，如果我将我的侧边栏

位置设置为
固定
，那么我的侧边栏也会显示在整个页眉的前面。我希望侧边栏在标题后开始，就像我用
top:100vh
将其
位置设置为
绝对
，除非向下滚动时它会保持不变

你如何做到这一点？提前非常感谢


正文{
保证金：0；
}
#标题{
高度：100vh；
宽度：100%；
位置：相对位置；
背景颜色：蓝色；
}
#主要{
左边距：20vw；
高度：100vh；
}
边栏{
宽度：20vw；
高度：100vh；
排名：0；
左：0；
背景色：#130E0A；
位置：固定；
z指数：1；
}

争议练习曲：四个国家和信息的主题
如果您可以使用jQuery，您可以使用类似的工具


$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
//>=不等于1000）{
//clearHeader，非clearHeader-caps H
$（“侧栏”）.addClass（“固定”）；
}
否则{
$（“侧栏”）.removeClass（“固定”）；
}
}); //缺失）
正文{
保证金：0；
}
#标题{
宽度：100%；
背景颜色：蓝色；
高度：1000px；
}
#主要{
左边距：20vw；
高度：10000px；
}
边栏{
宽度：20vw；
高度：500px；
显示：块；
背景色：#130E0A；
位置：相对位置；
z指数：1；
}
侧边栏。固定{
位置：固定；
左：20vw；
排名：0；
}

争议练习曲：四个国家和信息的主题
看看这个。只是将html中的一些内容更改为html5标准并编辑了css。我希望这能解决你的问题


#主{
左边距：20vw；
高度：100vh；
}
标题{
宽度：100%；
高度：85px；
背景色：红色；
填充：20px；
}
#边栏{
宽度：20vw；
高度：100vh；
背景色：#130E0A；
位置：固定；
左：0.9vw；
z指数：1；
}

我是头|我是头。
我是侧边栏|我是侧边栏。
这里有一个javascript解决方案，它可以监视您滚动的距离，并在您滚动过标题时使用
修复的


var sidebar=document.getElementById（'sidebar'）；
addEventListener（'scroll'，function（）{
var st=document.body.scrollTop，
mt=document.getElementById（'main'）.offsetTop；
如果（st>mt）{
sidebar.classList.add（'fixed'）；
}否则{
侧栏.classList.remove（'fixed'）；
}
})
正文{
保证金：0；
}
#主要{
高度：100vh；
位置：相对位置；
}
#标题{
背景：红色；
}
边栏{
背景色：#130E0A；
宽度：20vw；
高度：100vh；
字号：5em；
颜色：白色；
位置：绝对位置；
顶部：0；左侧：0；
溢出y：滚动；
}
.固定{
位置：固定；
}
#时间线，侧边栏{
字号：5em；
}
#时间线{
左边距：20vw；
}

争议练习曲：四个国家和信息的主题
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf
asdf

pasdfasdf
asdf
asdf
asdf
asdf
asdf

您可以使用jquery吗？如果您想添加真实内容，需要更改一些样式。同时，Tipp也不使用大众vh，因为它在响应性方面会有很多问题。只有全屏的东西。喜欢滑球还是玩偶谢谢。我可以使用jQuery，只是我完全不知道它是如何工作的。你不知道如何使用它吗？或者你不知道那是什么。我可以向你解释幸运的是它不起作用。。。不过我很欣赏法国人。非常感谢你，但这不管用。。。JavaScript运行良好，但当条件得到尊重（st>mt）时，不会发生任何事情，侧边栏不会变得固定……：'（我发现了问题：你的代码只在边栏是一个元素的情况下工作，它不在一个@TomFévrier的代码中工作（即使有“边栏”id）@TomFévrier你的代码中有相同的HTML和CSS…这就是我得到它的原因。我无法神奇地知道你会使用不同的元素。我所能做的就是在你的帖子中解决这个问题。