如何修復導航欄上滾動

Question

好的，所以我想修復頂部滾動導航欄就像這個網站 - http://manipal.edu/ 好吧，我知道，他們有很多類似這樣的問題，但我無法將它們應用於我的代碼中。請幫助

這是我fiddle

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
} 
 
.navbar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #f2f2f2; 
 
} 
 
.navbar li { 
 
    float: left; 
 
} 
 
li a, 
 
.dropbtn { 
 
    display: inline-block; 
 
    color: #333; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
.navbar li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: #333; 
 
    color: #f2f2f2; 
 
} 
 
.navbar li.dropdown { 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #333 
 
} 
 
.navbar .show { 
 
    display: block; 
 
} 
 
.xavierslogo { 
 
    width: 110px; 
 
    height: 109px; 
 
    margin-left: 20%; 
 
} 
 
.xavierstext { 
 
    width: ; 
 
    height: ; 
 
    margin-left: 0%; 
 
} 
 
.topbg { 
 
    background-color: #333; 
 
}

<header class="topbg"> 
 
    <img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo"> 
 
    <img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext"> 
 
</header> 
 

 

 
<ul class="navbar"> 
 
    <li><a href="#home">Home</a> 
 
    </li> 
 
    <li><a href="#news">Text one</a> 
 
    </li> 
 
    <li><a href="#news">Text Two</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown ▼</a> 
 
    <div class="dropdown-content" id="myDropdown"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </li> 
 

 
</ul> 
 

 
<div class="main"> 
 

 

 
    z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br> 
 

 
</div>

Answer 1

試試這個...

你必須使用jQuery此片段。

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop() > $('header').height()) 
 
     $('.navbar').addClass('topNav'); 
 
    else 
 
     $('.navbar').removeClass('topNav'); 
 
    }); 
 
});

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
} 
 
.navbar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #f2f2f2; 
 
} 
 
.navbar li { 
 
    float: left; 
 
} 
 
li a, 
 
.dropbtn { 
 
    display: inline-block; 
 
    color: #333; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
.navbar li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: #333; 
 
    color: #f2f2f2; 
 
} 
 
.navbar li.dropdown { 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #333 
 
} 
 
.navbar .show { 
 
    display: block; 
 
} 
 
.xavierslogo { 
 
    width: 110px; 
 
    height: 109px; 
 
    margin-left: 20%; 
 
} 
 
.xavierstext { 
 
    width: ; 
 
    height: ; 
 
    margin-left: 0%; 
 
} 
 
.topbg { 
 
    background-color: #333; 
 
} 
 
.topNav { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<header class="topbg"> 
 
    <img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo"> 
 
    <img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext"> 
 
</header> 
 

 

 
<ul class="navbar"> 
 
    <li><a href="#home">Home</a> 
 
    </li> 
 
    <li><a href="#news">Text one</a> 
 
    </li> 
 
    <li><a href="#news">Text Two</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown ▼</a> 
 
    <div class="dropdown-content" id="myDropdown"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </li> 
 

 
</ul> 
 

 
<div class="main"> 
 

 

 
    z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br> 
 

 
</div>

如果你想要這個純/純JavaScript

function topScrl() { 
 
    if (document.getElementById('body1').scrollTop > document.getElementById('head1').clientHeight) 
 
    document.getElementById('nav1').className = "topNav navbar"; 
 
    else 
 
    document.getElementById('nav1').className = "navbar"; 
 
}

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
} 
 
.navbar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #f2f2f2; 
 
} 
 
.navbar li { 
 
    float: left; 
 
} 
 
li a, 
 
.dropbtn { 
 
    display: inline-block; 
 
    color: #333; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
.navbar li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: #333; 
 
    color: #f2f2f2; 
 
} 
 
.navbar li.dropdown { 
 
    display: inline-block; 
 
} 
 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 
.dropdown-content a:hover { 
 
    background-color: #333 
 
} 
 
.navbar .show { 
 
    display: block; 
 
} 
 
.xavierslogo { 
 
    width: 110px; 
 
    height: 109px; 
 
    margin-left: 20%; 
 
} 
 
.xavierstext { 
 
    width: ; 
 
    height: ; 
 
    margin-left: 0%; 
 
} 
 
.topbg { 
 
    background-color: #333; 
 
} 
 
.topNav { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
}

<body id="body1" onscroll="topScrl()"> 
 
    <header id="head1" class="topbg"> 
 
    <img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo"> 
 
    <img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext"> 
 
    </header> 
 

 

 
    <ul id="nav1" class="navbar"> 
 
    <li><a href="#home">Home</a> 
 
    </li> 
 
    <li><a href="#news">Text one</a> 
 
    </li> 
 
    <li><a href="#news">Text Two</a> 
 
    </li> 
 
    <li class="dropdown"> 
 
     <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown ▼</a> 
 
     <div class="dropdown-content" id="myDropdown"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
     </div> 
 
    </li> 
 

 
    </ul> 
 

 
    <div class="main"> 
 

 

 
    z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br>z 
 
    <br> 
 

 
    </div> 
 
</body>