Question

我一直在尝试使用源代码制作一个粘性导航，但只是简单地找不到任何东西或做任何事情。

代码有两个导航栏TOP＆amp; MID我希望有人可以帮助我创建TOPnav，在某一点上支持MIDnav，以创造粘性效果。

我没有JS链接的原因我希望有人能够粗略地告诉我该怎么做。

谢谢你:)。

PS：如果我的代码中的任何内容看起来奇怪/奇怪或者可能不需要随意指出它，因为我希望改进它。

＆＃13;

html{

overflow-x: hidden;
height: 2000px;


background: white;
}


.TOPNAV {
  position: fixed;
  width: 80vw;
  height: 20px;
  margin-top: -720px;
  margin-left: -10px;
  border-top: 70px solid #AC3838;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  z-index: 10;
}
.TOPNAV a {
  position: fixed;
  font-family: 'Bungee', cursive;
  text-decoration: none;
  font-size: 20px;
  margin-top: -60px;
  margin-left: 4vw;
  color: white;
  text-shadow: 1px 1px 1px black, 0 0 0 #000, 2px 4px 10px black;
}
.TOPNAV li {
  float: left;
  width: 15vw;
  padding: 0px 0px 10px 0px;
  display: block;
  list-style-type: none;
}
.MIDNAV {
  position: relative;
  width: 100vw;
  height: 20px;
  margin-top: 730px;
  margin-left: -10px;
  border-bottom: 70px solid #575194;
  z-index: 10;
}
.MIDNAV a {
  position: absolute;
  font-family: 'Bungee', cursive;
  text-decoration: none;
  font-size: 20px;
  margin-top: 30px;
  margin-left: 10vw;
  color: white;
  text-shadow: 1px 1px 1px black, 0 0 0 #000, 2px 4px 10px black;
}
.MIDNAV li {
  float: left;
  width: 15vw;
  padding: 0px 0px 20px 0px;
  display: block;
  list-style-type: none;
}

＆＃13;

<html>


<head>

  <title></title>

  <link rel="stylesheet" type="text/css" href=".//CSS\SCRAP_CSS.css">


  <script src="JS/jquery-3.1.0.js" type="text/javascript"></script>

  <script type="text/javascript" src="JS/SCRAP.js"></script>



  <link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">

</head>

<body>






  <div class="TOPNAV">



    <li><a href="Page2.html">Home</a> 
    </li>
    <li><a href="Page2.html">Index</a> 
    </li>
    <li><a href="Page2.html">About</a> 
    </li>
    <li><a href="Page2.html">List</a> 
    </li>
    <li><a href="Page2.html">Login</a> 
    </li>


  </div>




  <div class="MIDNAV">


    <li><a href="Page2.html">Home</a> 
    </li>
    <li><a href="Page2.html">Index</a> 
    </li>
    <li><a href="Page2.html">About</a> 
    </li>
    <li><a href="Page2.html">List</a> 
    </li>
    <li><a href="Page2.html">Login</a> 
    </li>


  </div>






</body>

</html>

＆＃13;

Answer 1

如果您正在寻找使用纯Javascript，html和css的简单粘性导航，那么您可以使用此代码段。我得到了from the 30day Javascript tutorial我强烈推荐，并添加了一些评论。致Wes Bos。

   // grab the element that contains the navigation we want to create a sticky effect for
const nav = document.querySelector("#main");

// create a variable that stores the height of the space between the top of the parent node (in this case our body element) of our nav and the top of our nav
let topOfNav = nav.offsetTop;

// create our function that should run everytime the user scrolls
function fixNav() {
  // if the user scrolls further down than the height of our variable add the class fixed-nav and add a padding
  if( window.scrollY >= topOfNav ) {
    // the padding is added because the element is removed from the document flow due to position: fixed
    document.body.style.paddingTop = nav.offsetHeight + 'px';
    // position: add css class fixed-nav
    document.body.classList.add('fixed-nav'); 
    } else {
    // remove the class and padding when the user scrolls above our nav again
    document.body.style.paddingTop = 0;
    document.body.classList.remove('fixed-nav');
    }
}

window.addEventListener('scroll', fixNav);

* {
  margin: 0;
  padding: 0;
  }

body {
  height: 800px;
  background: grey;
  }

.upper-space {
  display: block; 
  background: red;
  height:200px
  }

nav {
  display: block;
  width: 100%;
  top: 0;
  color: white;
  background: #333;
  height: 100px;
  }

ul.navigation {
  list-style-type: none;
  }

.navigation li {
  float: left;
  width: 100px;
  }

.fixed-nav #main {
  position: fixed;
  }

<body>
  
  <div class="upper-space">
  </div>
  
  <nav id="main">
    <ul class="navigation">
      <li>menu item 1</li>
      <li>menu item 2</li>
      <li>menu item 3</li>
    </ul>
  </nav>
  
  Suscipit, libero, aperiam est sequi aspernatur malesuada ratione, quaerat ipsa posuere nisl perferendis laboris facilisis voluptas conubia sodales, dolorem? Malesuada purus, dolorem torquent distinctio, animi qui rerum, culpa. Mattis accumsan doloribus pellentesque eveniet. Porro sequi omnis soluta inceptos, dicta curae hac adipiscing anim adipiscing ante. Luctus hymenaeos pharetra, facilisi explicabo.

Laboris justo tincidunt illo incididunt erat netus quisquam doloremque eos habitasse sequi! Rerum primis, sodales! Totam, feugiat mattis est atque! Eiusmod curabitur deserunt earum quis, libero euismod reiciendis quae et, perspiciatis donec voluptates, consequuntur, vel purus! Voluptate platea doloribus? Blanditiis aptent litora excepteur vulputate! Cursus. Felis nostrum mattis, nisi, adipiscing.
  
</body>

粘性导航帮助

1 个答案: