Javascript 侧导航覆盖在粘性导航条的顶部，侧导航覆盖的高度有问题_Javascript_Html_Css_Sidenav

Javascript 侧导航覆盖在粘性导航条的顶部，侧导航覆盖的高度有问题

javascript html css

Javascript 侧导航覆盖在粘性导航条的顶部，侧导航覆盖的高度有问题,javascript,html,css,sidenav,Javascript,Html,Css,Sidenav,我对sidenav覆盖的高度有这个问题，我知道它会弄乱粘性导航条的javascript，但我不知道如何使sidenav的高度达到100%。任何帮助都将不胜感激代码如下： <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-size: 28px;

我对sidenav覆盖的高度有这个问题，我知道它会弄乱粘性导航条的javascript，但我不知道如何使sidenav的高度达到100%。任何帮助都将不胜感激

代码如下：

<html>     
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
 body {
   margin: 0;
   font-size: 28px;
   font-family: Arial, Helvetica, sans-serif;
 }


.header {
   background-color: #f1f1f1;
   padding: 30px;
   text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 9px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <div class="w3-sidebar w3-bar-block w3-animate-left" style="display:none;z-index:999;height:100%" id="mySidebar">
  <button class="w3-bar-item w3-button w3-large" onclick="w3_close()"> Close &times;</button>
  <a class="w3-bar-item w3-button" href="#">Link 1</a>
  <a class="w3-bar-item w3-button" href="#">Link 2</a>
  <a class="w3-bar-item w3-button" href="#">Link 3</a>
</div>
<div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>
<script>
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("myOverlay").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("myOverlay").style.display = "none";
}
</script>
<div id="navbar">
<span class="w3-button w3-white w3-xlarge" onclick="w3_open()">&#9776;</span>

</div>

<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>

  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>

</div>

<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

</body>
</html>


身体{
保证金：0；
字号：28px；
字体系列：Arial、Helvetica、无衬线字体；
}
.标题{
背景色：#f1f1；
填充：30px；
文本对齐：居中；
}
#导航栏{
溢出：隐藏；
背景色：#333；
}
#导航栏a{
浮动：左；
显示：块；
颜色：#F2F2；
文本对齐：居中；
填充：9px 16px；
文字装饰：无；
字号：17px；
}
#导航栏a：悬停{
背景色：#ddd；
颜色：黑色；
}
#导航条a.激活{
背景色：#4CAF50；
颜色：白色；
}
.内容{
填充：16px；
}
.粘的{
位置：固定；
排名：0；
宽度：100%；
}
.粘性+.内容{
填充顶部：60px；
}
向下滚动
向下滚动以查看粘性效果
关闭&次；
函数w3_open（）{
document.getElementById（“mySidebar”）.style.display=“block”；
document.getElementById（“myOverlay”）.style.display=“block”；
}
函数w3_close（）{
document.getElementById（“mySidebar”）.style.display=“无”；
document.getElementById（“myOverlay”）.style.display=“无”；
}
☰
粘性导航示例
当您到达滚动位置时，导航栏将粘在顶部
一些文本以启用滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。Affert laboramus repudiandae nec等人的早期特效师，他的广告是“无痣Volupatibus”。
一些文本可以滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。Affert laboramus repudiandae nec等人的早期特效师，他的广告是“无痣Volupatibus”。
一些文本可以滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。Affert laboramus repudiandae nec等人的早期特效师，他的广告是“无痣Volupatibus”。
一些文本可以滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。Affert laboramus repudiandae nec等人的早期特效师，他的广告是“无痣Volupatibus”。
一些文本可以滚动。。Lorem ipsum dolor sit amet，illum定义为“不存在”，maluisset结论为“不存在”，altera fabulas为“不存在”。因为荣耀的原因，我永远爱你。对共和国实验室的影响，以及对其无胎动的初步疗效
window.onscroll=function（）{myFunction（）}；
var navbar=document.getElementById（“navbar”）；
var sticky=navbar.offsetTop；
函数myFunction（）{
如果（window.pageYOffset>=粘性）{
navbar.classList.add（“粘性”）
}否则{
navbar.classList.remove（“粘性”）；
}
}

我只需要将sidenav显示在100%的高度，即使它位于粘性导航条内。提前谢谢

为标题设置

位置：相对


设置位置：绝对；顶部：侧边栏的0。
它对我有用。我希望你也是