更改導航欄的位置取決於滾動條
[英]make changes to the position of navigation bar depend on scroll bar
問題描述
我的問題是如何根據滾動條或標題的暴露區域來更改導航欄的位置？
這是我的導航欄的初始位置：-
我想要的是導航的位置不是固定的，而是絕對position: absolute; 直到我向下滾動瀏覽器，直到導航欄到達頁面頂部 （如gif所示）， 然后我才希望其位置更改為fixed 。
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
position: absolute;
top: 290px;
z-index:999;
right:0px;
}
當導航欄到達頂部時，我希望其位置更改為固定position: fixed;
#navul01 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: grey;
position: fixed;
top: 12px;
z-index:999;
right:6px;
}
如您在此gif中看到的，其位置更改為固定
我的第二個問題是僅使用CSS是否可能，或者我也必須使用Java腳本嗎？
這是我的代碼：-
header { width:100%; height:350px; position:relative; overflow:hidden; z-index:-1; border:3px solid grey; background-position: center center; display: flex; background-image:url("https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg"); background-size: cover; } .main-wrapper { position: relative; } #navul01 { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: grey; position: fixed; top: 12px; z-index:999; right:6px; } #navul01 li { float: left; } #navul01 li a { display: block; color: white; font-weight: bold; text-shadow: 2px 2px black; text-align: center; padding: 14px 16px; font-size: 25px; text-decoration: none; border:2px solid white; } #navul01 li a:hover { background-color: lightgreen; } #subjects_nav { list-style-type: none; margin: 0; padding: 0; position: absolute; left: 10%; width: 80%; } #subjects_nav li a { display: block; color: white; font-size: 5vw; font-weight: bold; text-shadow: 2px 2px black; text-align: center; padding: 50px 50px; text-decoration: none; border:3px solid white; transition: 1s; } #subjects_nav li a:hover { margin: 0 -5%; } #physics_image { background-position: center center; display: flex; background-image:url("https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg"); background-size: cover; } #chemistry_image { background-position: center center; display: flex; background-image:url("https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg"); background-size: cover; } #maths_image { background-position: center center; display: flex; background-image:url("https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg"); background-size: cover; } #space { list-style: none; }
<!DOCTYPE html> <html> <head> <title>home</title> <link rel="stylesheet" type="text/css" href="css/index.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="main-wrapper"> <header> </header> <div><nav> <ul id="navul01"> <li><a href="index.html">Home</a></li> <li><a href="#news">blog</a></li> <li><a href="#about">contacts</a></li> </ul> </nav></div> </div> <div> <ul id="space"> <li><a></a></li> </ul> </div> <div> <ul id="subjects_nav"> <li><a id="physics_image" href="#home">PHYSICS</a></li> <li><a id="chemistry_image" href="pages\\chemistry\\chemistry.html">CHEMISTRY</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> </ul> </div> </body> </html>
2 個解決方案
解決方案1
1 2018-02-19 14:56:43
您需要將文檔的滾動位置與導航的偏移位置進行比較。 如果滾動位置較大，則向其添加一個類。
我為您提供了一個jquery代碼示例：
$(document).ready(function(){
// first get the starting position of the navigation
$scrollPosition = $('#navigation').offset().top;
});
$(document).on('scroll', function(){
// fire compare function on document scroll
compareScrollPositionToNavigation($scrollPosition);
});
function compareScrollPositionToNavigation(){
// check if document scroll position is bigger than position of navigation
// if yes add class fixed to navigation / if not remove it
if($(document).scrollTop() > $scrollPosition){
$('#navigation').addClass('fixed');
} else {
$('#navigation').removeClass('fixed');
}
}
這是完整的示例： https : //jsfiddle.net/tqcsgmru/9/
解決方案2
1 已采納 2018-02-19 15:07:57
您需要一些JS來吸引用戶滾動。
現在，在此之前，需要定位到“ nav” position: absolute 。 使用CSS類在加載時添加它。
如果用戶滾動超過“絕對”位置，則刪除“絕對”類。 如果用戶向后滾動到更少，則重新添加類。
;）
var nav = $("#navul01"); nav.addClass("absolute"); var navPos = nav.offset().top; $(window).on("scroll", function(){ if( this.scrollY > navPos ){ nav.removeClass("absolute"); }else{ nav.addClass("absolute"); } });
header { width:100%; height:350px; position:relative; overflow:hidden; z-index:-1; border:3px solid grey; background-position: center center; display: flex; background-image:url("https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg"); background-size: cover; } .main-wrapper { position: relative; } #navul01 { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: grey; position: fixed; top: 12px; z-index:999; right:6px; } #navul01.absolute { position: absolute; top:290px; } #navul01 li { float: left; } #navul01 li a { display: block; color: white; font-weight: bold; text-shadow: 2px 2px black; text-align: center; padding: 14px 16px; font-size: 25px; text-decoration: none; border:2px solid white; } #navul01 li a:hover { background-color: lightgreen; } #subjects_nav { list-style-type: none; margin: 0; padding: 0; position: absolute; left: 10%; width: 80%; } #subjects_nav li a { display: block; color: white; font-size: 5vw; font-weight: bold; text-shadow: 2px 2px black; text-align: center; padding: 50px 50px; text-decoration: none; border:3px solid white; transition: 1s; } #subjects_nav li a:hover { margin: 0 -5%; } #physics_image { background-position: center center; display: flex; background-image:url("https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg"); background-size: cover; } #chemistry_image { background-position: center center; display: flex; background-image:url("https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg"); background-size: cover; } #maths_image { background-position: center center; display: flex; background-image:url("https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg"); background-size: cover; } #space { list-style: none; }
<!DOCTYPE html> <html> <head> <title>home</title> <link rel="stylesheet" type="text/css" href="css/index.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="main-wrapper"> <header> </header> <div><nav> <ul id="navul01"> <li><a href="index.html">Home</a></li> <li><a href="#news">blog</a></li> <li><a href="#about">contacts</a></li> </ul> </nav></div> </div> <div> <ul id="space"> <li><a></a></li> </ul> </div> <div> <ul id="subjects_nav"> <li><a id="physics_image" href="#home">PHYSICS</a></li> <li><a id="chemistry_image" href="pages\\chemistry\\chemistry.html">CHEMISTRY</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> <li><a id="maths_image" href="#contact">MATHS</a></li> </ul> </div> </body> </html>
滾動后固定導航欄
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.