Question

我制作了一个悬停在侧面的导航栏。每当用户向下滚动时，我都会使导航栏变粘，当我向下滚动时，导航栏不会停留在侧面，而是向前漂浮，好像在漂浮。如何始终保持导航栏在侧面？

以下是导航栏html的代码：

sudo apt-get install php-mysql

这是导航栏和粘性的CSS：

<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：

.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%;
  }

这是JS用于粘性：

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);
   }
 }

Answer 1

你是说那个吗？删除js代码，则需要position: fixed;上sidenav DIV。

.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>

Answer 2

我认为您可以尝试将导航固定在您的导航上。也许z-index可以确保它居于首位。

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

保持侧栏导航在侧

2 个答案: