Question

我的问题是如何根据滚动条或标题的曝光区域更改导航栏的位置？

这是导航栏的初始位置： -

我想要的是导航的位置不是固定的，而是绝对position: absolute;，直到我向下滚动浏览器直到导航栏到达页面顶部（因为你可以在gif中看到然后我想将其位置更改为固定。

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

Answer 1

您需要将文档的滚动位置与导航的偏移位置进行比较。如果滚动位置较大，则向其添加一个类。

我为您提供了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/

Answer 2

你需要一点JS来吸引用户滚动。

现在，在此之前，您需要获得＆＃34; nav＆＃34;到position: absolute时的位置。使用CSS类在加载时添加它。

如果用户滚动超过＆＃34;绝对＆＃34;位置，删除＆＃34;绝对＆＃34;类。如果用户向后滚动到更少...重新添加该类。

）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

根据滚动条

2 个答案: