将侧边栏导航放在一边答案

【问题标题】：Keeping sidebar navigation at the side将侧边栏导航放在一边
【发布时间】：2019-02-02 19:53:12
【问题描述】：

我制作了一个可悬停在侧面的导航栏。每当用户向下滚动时，我都会使导航栏保持粘性，但当我向下滚动时，导航栏不会停留在侧面，并且会像浮动一样向前出现。如何让导航栏一直在旁边？

这里是导航栏的html代码：

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title>Online Portfolio</title>
  <link rel="stylesheet" href="gallery.css">
</head>
<body style="background-image: url('Images Used/Background4.png')">
<header>
    <div class="wrapper">
         <div id="mySidenav" class="sidenav">
            <a href = "Home.html" id="home" style="font-size: 16.5px">Home</a>
            <a href = "Gallery.html" id="gallery" style="font-size: 16.5px">Gallery</a>
            <a href="#" id="contactme" style="font-size: 16.5px">Contact Me</a>
        </div>
    </div>
    <div class="welcome-text">
    </div>
</header>
<img src="Images Used/MyLogo.png" alt="Avatar" class="avatar">
     <div class="grid">
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
        <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
 </div>
</body>
</html>

这是导航栏的css和sticky：

.wrapper {
width: 1170px;
margin: auto;
}



#mySidenav a {
   position: absolute;
   left: -80px;
   transition: 0.3s;
   padding: 15px;
   width: 100px;
   text-decoration: none;
   font-size: 20px;
   color: white;
   border-radius: 0 5px 5px 0;
   }

#mySidenav a:hover {
   left: 0;
}

#home {
   top: 250px;
   background-color: #95a3e4;
}

#gallery{
    top: 350px;
    background-color: #fd937b;
  }

#contactme {
    top: 450px;
    background-color: #8165bb;
   }

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

这是图片 css：

body {
 margin: 0;
}

img {
 width: 100%;
 display: block;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
 }

 @media (min-width: 600px) {
   .grid {
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 5px;
    }
  }
@media (min-width: 900px) {
   .grid {
     grid-template-columns: repeat(4, 1fr);
   }
 }

这是sticky的JS：

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

你是这个意思吗？去掉js代码，sidenav div上需要position: fixed;。

.wrapper {
   width: 1170px;
   margin: auto;
}

.sidenav {
   top: 50%;
   left: 0;
   position: fixed;
   transform: translate(0, -50%);
}

#mySidenav a {
   position: relative;
   left: -80px;
   transition: 0.3s;
   padding: 15px;
   width: 100px;
   display: block;
   text-decoration: none;
   font-size: 20px;
   color: white;
   border-radius: 0 5px 5px 0;
}

#mySidenav a:nth-child(n+2) {
   margin: 20px 0 0;
}

#mySidenav a:hover {
   left: 0;
}

#home {
   background-color: #95a3e4;
}

#gallery{
   background-color: #fd937b;
}

#contactme {
   background-color: #8165bb;
}

body {
   margin: 0;
}

img {
   width: 100%;
   display: block;
}

.grid {
   display: grid;
   grid-template-columns: 1fr;
}

@media (min-width: 600px) {
   .grid {
       grid-template-columns: repeat(2, 1fr);
       grid-gap: 5px;
    }
}

@media (min-width: 900px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

<header>
    <div class="wrapper">
         <div id="mySidenav" class="sidenav">
            <a href = "Home.html" id="home" style="font-size: 16.5px">Home</a>
            <a href = "Gallery.html" id="gallery" style="font-size: 16.5px">Gallery</a>
            <a href="#" id="contactme" style="font-size: 16.5px">Contact Me</a>
        </div>
    </div>
    <div class="welcome-text">
    </div>
</header>
<img src="Images Used/MyLogo.png" alt="Avatar" class="avatar">
     <div class="grid">
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
       <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
        <div class="image"><img src="https://source.unsplash.com/collection/1315269/1600x900"></div>
 </div>

【讨论】：

非常感谢！

【解决方案2】：

我认为您可以尝试固定到您导航的位置。或许还有 z-index 以确保它是最重要的。

#mySidenav {
  position: fixed;
  z-index: 1000;
}

【讨论】：