javascript - 根据滚动条更改导航栏的位置

标签 javascript jquery css html

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

这是我的导航栏的初始位置:- enter image description here

我要的是导航的位置不是固定的而是绝对的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;
}

enter image description here

当导航栏到达顶部时，我希望它的位置更改为固定 position: fixed;

enter image description here 

#navul01 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: grey;
    position: fixed;
    top: 12px;
    z-index:999;
    right:6px;
}

正如你在这个 gif 中看到的，它的位置发生了变化以修复

enter image description here

enter image description here

我的第二个问题是是否可以只使用 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>

最佳答案

您需要一点 JS 来捕捉用户滚动。

现在，在此之前，您需要获取 position: absolute 的“nav”位置。使用 CSS 类在加载时添加它。

如果用户滚动超过“绝对”位置，移除“绝对”类。如果用户滚动回 less... 重新添加类。

;)

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>

关于javascript - 根据滚动条更改导航栏的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48868475/

上一篇：带有关闭按钮的 CSS 弹出窗口

下一篇：javascript - 第二个背景图像的不同动画行为

相关文章：

php - 将 php 数组分配给 javascript 数组

javascript - 如何在没有任何库的情况下使用 jquery swipe？

javascript - 如何通过标签 "selected"改变背景图片

javascript - 向菜单切换添加第二个 JavaScript 函数

javascript - 在 asp.net 中设置 facebook 按钮的样式

html - 无法设置 ionic 按钮栏的高度

javascript - 我如何在谷歌扩展中打开/关闭 content_scripts？

javascript - Mousedown 事件处理程序会干扰按键处理程序

javascript - 即使 AngularJS 有延迟，MouseEnter 事件也会失火

javascript - jQuery数据属性选择器问题

©2024 IT工具网  联系我们