Javascript 具有百分比宽度导航栏的可滚动页面

目标：创建由同样宽的导航栏覆盖的滚动内容。示例html可能如下所示：

<div class="scrollable">
  <div class="content"></div>
</div>
<div class="navbar"></div>

abcd







我是纳瓦尔

检查代码笔中的答案：

---

您应该使用

position:fixed

而不是

position:absolute

将导航条固定在顶部

检查代码笔中的答案：

---

您应该使用

position:fixed

而不是

position:absolute

来固定顶部的导航栏

这看起来非常接近我感兴趣的内容-但是在您的代码笔中，

元素实际上是不可滚动的（尽管我没有将此列为标准，但我希望它是由类名暗示的）。您的示例看起来很有效，但这只是因为
html
元素（而不是
.scrollable
）正在滚动。（即使我添加
.scrollable{overflow:hidden；}
，它也有效）是的，我忘了删除
溢出-x
，但是如果只有内容溢出，它就会滚动。我想这就是你想要的。你介意尝试更新你的代码吗？（也许可以将它作为一个片段包含在你的答案中！这样更容易访问。）这看起来非常接近我感兴趣的内容-但是在你的代码笔中，
.scrollable
元素实际上是不可滚动的（尽管我没有将其列为标准，我希望它是由类名暗示的）。您的示例看起来很有效，但这只是因为
html
元素（而不是
.scrollable
）正在滚动。（即使我添加
.scrollable{overflow:hidden；}
，它也能工作）是的，我忘了删除
溢出-x
，但是如果只有内容溢出，它就会滚动。我想这就是你想要的。你介意尝试更新你的代码吗？（也许可以将它作为一个片段包含在你的答案中！这样更容易访问。）