Javascript 如何仅使用HTML和CSS（不使用JS）制作“粘性”导航栏？
我正在创建一个简单的HTML网页，我想创建一个粘性导航条，如果页面被滚动，它会漂浮在内容上，如果页面没有滚动，它会显示在内容之前，最上面的部分是可见的。在第二种情况下，它几乎可以工作，但与内容重叠，因此我设法让它与JavaScript一起工作：将内容容器的padding top CSS属性设置为navbar的offsetHeight+15px，即navbar与滚动页面之间的缩进，并在每次更改窗口大小时更新它。但也许它也可以在纯CSS中完成 以下是代码片段： 函数fixContentPadding{ document.getElementByIdcontent-container.style.paddingTop=document.getElementByIdnavbar.offsetHeight+15+px； } window.onresize=fixContentPadding； 固定内容填充； 导航栏{ 宽度：100%； 背景颜色：浅蓝色； 颜色：白色； 排名：0； 位置：固定； z指数：1； } 导航栏*：悬停{ 背景色：2196F3； 边界半径：32px； } 导航栏*{ 浮动：左； 文字装饰：无； } 内容{ 宽度：90%； 保证金：自动； 单词包装：打断单词； 填充：0.01em 16px； 长方体阴影：0 2px 5px 0 rgba0,0,0,0.16,0 2px 10px 0 rgba0,0,0,0.12 } 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界Javascript 如何仅使用HTML和CSS（不使用JS）制作“粘性”导航栏？,javascript,html,css,navbar,Javascript,Html,Css,Navbar,我正在创建一个简单的HTML网页，我想创建一个粘性导航条，如果页面被滚动，它会漂浮在内容上，如果页面没有滚动，它会显示在内容之前，最上面的部分是可见的。在第二种情况下，它几乎可以工作，但与内容重叠，因此我设法让它与JavaScript一起工作：将内容容器的padding top CSS属性设置为navbar的offsetHeight+15px，即navbar与滚动页面之间的缩进，并在每次更改窗口大小时更新它。但也许它也可以在纯CSS中完成 以下是代码片段： 函数fixContentPaddin
您的内容容器上有一个页边空白吗 导航栏{ 宽度：100%； 背景颜色：浅蓝色； 颜色：白色； 排名：0； 位置：固定； z指数：1； } 导航栏*：悬停{ 背景色：2196F3； 边界半径：32px； } 导航栏*{ 浮动：左； 文字装饰：无； } 内容容器{ 边缘顶端：40px； } 内容{ 宽度：90%； 保证金：自动； 单词包装：打断单词； 填充：0.01em 16px； 长方体阴影：0 2px 5px 0 rgba0,0,0,0.16,0 2px 10px 0 rgba0,0,0,0.12 } 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 这是为了： 导航栏{ 位置：粘性； 排名：0； 背景：aliceblue； } 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 函数fixContentPadding{ document.getElementByIdcontent-container.style.paddingTop=document.getElementByIdnavbar.offsetHeight+15+px； } window.onresize=fixContentPadding； 固定内容填充； 导航栏{ 宽度：100%； 高度：3em； 背景颜色：浅蓝色； 颜色：白色； 位置：固定； 排名：0； z指数：1； } 导航栏*：悬停{ 背景色：2196F3； 边界半径：32px； } 导航栏*{ 浮动：左； 文字装饰：无； } 内容{ 宽度：90%； 保证金：3em自动； 单词包装：打断单词； 填充：0.01em 16px； 长方体阴影：0 2px 5px 0 rgba0,0,0,0.16,0 2px 10px 0 rgba0,0,0,0.12 } 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界 你好，世界
您是否尝试过添加页边距顶部：；到内容元素？据我所知，你只是想要一种将内容与导航栏分离的方法，对吗？谢谢你的回答。它看起来真的很棒，也很优雅，但不幸的是，它没有显示全部高度的内容，只显示了前100像素。我尝试将容器的max height CSS属性设置为100%，而不是100px，但在这种情况下，滚动几行后，导航栏不粘，它开始与内容一起滚动。也许我误解了什么？谢谢。我只添加了具有max height和overflow属性的容器，以确保堆栈溢出代码段可以滚动。你不需要它们中的任何一个；您不需要容器元素。我已经相应地更新了我的答案。非常感谢
很非常感谢你！非常感谢你！