更改导航栏列表上文本和背景的颜色

时间：2019-02-25 19:11:11

标签： javascript html css list navbar

所以，我对此很陌生，需要一些帮助。 我有一个可用作导航栏的列表，我想在滚动到标题上方时更改其文本颜色和背景颜色，因此它始终可见。

这是代码：`

$(document).ready(function(){
  $(window).scroll(function(){
  	var scroll = $(window).scrollTop();
	  if (scroll > 300) {
	    $(".nav").css("text-color" , "black");
	  }
	  else{
		  $(".nav").css("text-color" , "white");  	
	  }
  })
})
/* Fara scroll-bar */
::-webkit-scrollbar { 
    display: none; 
}
/* Fonturi */
@font-face{
font-family:myfont;
src: url("fonts/Hum521It.ttf");
}
@font-face{
font-family:myfont2;
src: url("fonts/Montserrat-Medium.ttf");
}
@font-face{
font-family:myfont3;
src: url("fonts/Oswald-Regular.ttf");
}
@font-face{
font-family:myfont4;
src: url("fonts/Slabo27px-Regular.ttf");
}
@font-face{
font-family:myfont5;
src: url("fonts/Arapey-Regular.ttf");
}
@font-face{
font-family:myfont6;
src: url("fonts/RobotoCondensed-Light.ttf");
}
@font-face{
font-family:myfont7;
src: url("fonts/RobotoCondensed-Regular.ttf");
}
@font-face{
font-family:myfont8;
src: url("fonts/Raleway-Light.ttf");
}
@font-face{
font-family:myfont9;
src: url("fonts/SourceSansPro-Regular.ttf");
}
/* Structura */
* {
    box-sizing: border-box;
}
body{
	background-color:white;
	margin:0;
}
header{
	background-color:black;
	height:100vh;
}
main{
	
}
footer{
	background-color:black;
	float:bottom;
	text-color:white;
	width:100%;
	text-align:center;
	padding:30px;
}
/* Side-nav */

/* Nav-bar */
ul {
  list-style-type: none;
  margin: 0;
  padding: 20px;
  overflow: hidden;
  position:fixed;
  top:0;
  width:100%;
  
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.menu_white {
 color: white;
}
.menu_black {
 color: black;
}
/* Div-ul in care e nav-bar-ul*/
.nav {

}
/* Strike-through */
.strikethrough {
	display: inline-block;
	position: relative;
	transition: all 0.5s cubic-bezier(.55, 0, .1, 1);
}
.strikethrough:after {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	box-shadow: 0 1px rgba(255,255,255,0.6);
	margin-top: -0.7em;
	background: white;
	transform-origin: center left;
	animation: strikethrough 1s 0.5s cubic-bezier(.55, 0, .1, 1) 1;
	transition: transform 0.5s cubic-bezier(.55, 0, .1, 1);
}
@keyframes strikethrough {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
.strikethrough:hover:after {
	transform: scaleX(0);
	transform-origin: center right;
}
/* Paragrafe */
p{
	font-size:140px;
    text-align:center;
	text-color:white;
	font-family: 'myfont2', sans-serif; 
}
p2{
	font-size:17px;
    text-align:center;
	text-color:white;
	font-family: 'myfont6', sans-serif; 
}
p3{
	font-size:90px;
    text-align:center;
	text-color:white;
	font-family: 'myfont8', sans-serif; 
}
p4{
	font-size:17px;
    text-align:center;
	text-color:white;
	font-family: 'myfont8', sans-serif; 
}
p5{
	font-size:17px;
    text-align:center;
	text-color:white;
	font-family: 'myfont9', sans-serif; 
}
p6{
	font-size:90px;
    text-align:center;
	text-color:white;
	font-family: 'myfont8', sans-serif; 
}
/* test */
  <html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="css/mystyle.css">
   </head>
   <body>
      <header>
         <div class="nav">
            <ul>
               <li>
                  <a href="#home">
                     <span class="strikethrough">
                        <p2>Home</p2>
                     </span>
                  </a>
               </li>
               <li>
                  <a href="#news">
                     <span class="strikethrough">
                        <p2>Projects</p2>
                     </span>
                  </a>
               </li>
               <li>
                  <a href="#contact">
                     <span class="strikethrough">
                        <p2>Contact</p2>
                     </span>
                  </a>
               </li>
               <li style="float:right">
                  <a href="#about">
                     <span class="strikethrough">
                        <p2>About</p2>
                     </span>
                  </a>
               </li>
            </ul>
         </div>
         <br><br><br><br><br><br><br><br><br>
         <div class="nume">
            <p3><font style="color:white;padding-left:40px;">C Î R S T O I U  &nbsp B O G D A N</font></p3>
         </div>
         <br><br><br><br><br><br><br><br>
         <div class="nume2">
            <p6><font style="color:white;padding-left:500px;">-&nbsp W h o &nbsp a m &nbsp I ?&nbsp - </font></p6>
         </div>
      </header>
      <main>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
         <p>Test</p>
      </main>
      <footer>
         <div class="nume2" style="padding:15px;">
            <p4><font style="color:white;text-align:center">Cîrstoiu Bogdan - 2018<br> All rights reserved</font></p4>
         </div>
      </footer>
      <script src="/scripts/scripts.js"></script>
   </body>
</html>

我想要的只是一种简单的方法，它行得通，我已经尝试过一些，但是它们却行不通。上面显示的代码中尝试这样做，但是无效。如果您有任何建议，请让我知道 。谢谢！

编辑：另外，如果有人对我如何使这种响应方式有所帮助，请让我知道或指导我学习教程！

2 个答案:

答案 0 :(得分：0)

您可以使用导航的高度和y轴位置来计算您在滚动时添加具有所需样式的类的时间。

这样的事情。

document.addEventListener('scroll', function(){
    var height = document.querySelector(".section-1").offsetHeight;
    // your nav
    var nav = document.querySelector("nav");
    var ypos = window.pageYOffset;

    if(ypos > height) {
        nav.classList.add("fade-in"); //if scrolled passed
    } else {
        nav.classList.remove("fade-in");
    }
});

fade-in将具有您想要的background-color。

希望有帮助。在这里阅读有关这些位置属性的更多信息，例如：link

希望会有所帮助。

答案 1 :(得分：0)

您正在尝试更改JavaScript中元素nav的颜色。您确实应该更改导航栏中嵌套的段落标签的颜色。

我做了一个简单的示例来展示所需的行为，为简单起见，我删除了字体。

解决此问题的另一种方法是使导航栏变粘。

n = high - low + 1
sum_between = n * (low + high) / 2

 $(window).scroll(function() {
   var scroll = $(window).scrollTop();
   if (scroll > 50) {
   var element = $('.p2');
     $(".p2").css("color", "black");
   } else {
     $(".p2").css("color", "white");
   }
 })
 body {
   background-color: white;
   margin: 0;
 }

 header {
   background-color: #6495ED;
   height: 100px;
 }

 footer {
   background-color: black;
   float: bottom;
   color: white;
   width: 100%;
   text-align: center;
   padding: 30px;
 }


 /* Side-nav */

 /* Nav-bar */

 ul {
   list-style-type: none;
   margin: 0;
   padding: 20px;
   overflow: hidden;
   position: fixed;
   top: 0;
   width: 100%;
 }

 li {
   float: left;
 }

 li a {
   display: block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
 }

 .menu_white {
   color: white;
 }

 .menu_black {
   color: black;
 }

 .strikethrough {
   display: inline-block;
   position: relative;
   transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
 }

 .strikethrough: after {
   content: '';
   position: absolute;
   display: block;
   width: 100%;
   height: 2px;
   box-shadow: 0 1px rgba(255, 255, 255, 0.6);
   margin-top: -0.7em;
   background: white;
   transform-origin: center left;
   animation: strikethrough 1s 0.5s cubic-bezier(0.55, 0, 0.1, 1) 1;
   transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
 }

 @keyframes strikethrough {
   from {
     transform: scaleX(0);
   }

   to {
     transform: scaleX(1);
   }
 }

 .strikethrough:hover: after {
   transform: scaleX(0);
   transform-origin: center right;
 }

 /* Paragrafe */

 p {
   font-size: 140px;
   text-align: center;
   color: black;
 }

 .p2 {
   font-size: 17px;
   text-align: center;
   color: white;
 }

 .p3 {
   font-size: 90px;
   text-align: center;
   color: black;
 }

 .p4 {
   font-size: 17px;
   text-align: center;
   color: black;
 }

 .p5 {
   font-size: 17px;
   text-align: center;
   color: black;
 }

 .p6 {
   font-size: 90px;
   text-align: center;
   color: black;
 }

相关问题
最新问题