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

问题描述 投票：2回答：2

所以，我对此有点新意，我需要一些帮助。我有一个用作导航栏的列表，每当我滚动浏览标题时，我想要更改其文本颜色和背景颜色，因此它始终可见。

这是代码：`

$(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>

我想要的只是一个简单的方法，它有效，我已经尝试了一些，但它们不起作用。尝试在上面显示的代码中执行此操作，但它不起作用。如果您有任何建议，请让我知道 。谢谢 ！

编辑：另外，如果有人提示我如何使这个响应，请，让我知道或指导我一个教程！

javascript html css list navbar
2个回答
0
投票

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

我已经做了一个简单的例子来显示所需的行为，为简单起见，我删除了font-face。

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

 $(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;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <header>
      <div class="nav">
        <ul>
          <li>
            <a href="#home">
                     <span class="strikethrough">
                        <div class = "p2">Home</div>
                     </span>
                  </a>
          </li>
          <li>
            <a href="#news">
                     <span class="strikethrough">
                      <div class = "p2">Projects</div>
                     </span>
                  </a>
          </li>
          <li>
            <a href="#contact">
                     <span class="strikethrough">
                     <div class = "p2">Contact</div>
                     </span>
                  </a>
          </li>
          <li style="float:right">
            <a href="#about">
                     <span class="strikethrough">
                     <div class = "p2">About</div>
                     </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>
  </body>

</html>
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

希望它有所帮助，问候。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.