粘性導航幫助

我一直在試圖做一個粘性導航的源代碼下面波紋管，但只是簡單地找不到任何東西或使任何工作。粘性導航幫助

該代碼有兩個導航欄頂部& MID，我希望有人可以幫助我創建TOPnav在MIDNAV後面在某個點創建粘性像效果。

我沒有JS鏈接的原因，我希望有人可以給我一個粗略的想法，該怎麼做。

謝謝:)。 PS：如果我的代碼中有任何東西看起來奇怪/怪異或可能不需要，隨時指出它，因爲我希望改進它。

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

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

來源

2016-09-25 HelpmePLS

如果你正在尋找一個純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>

來源

2017-01-20 23:22:29 koedev

粘性導航幫助

回答

相關問題