Итак, я новичок в этом, и мне нужна помощь.У меня есть список, который работает как панель навигации, и я хочу менять его цвет текста и цвет фона всякий раз, когда я прокручиваю заголовок, поэтому он виден постоянно.
Вот код: `
$(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   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;">-  W h o   a m   I ?  - </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>
Все, что я хочу, - это простой способ сделать это, он работает, я уже пробовал некоторые из них, и они не работают.Есть попытка сделать это в коде, показанном выше, но это не работает.Если у Вас есть предложения, пожалуйста, дайте мне знать .Спасибо!
edit: также, если у кого-то есть совет, как мне сделать этот отзыв, пожалуйста, дайте мне знать или направьте меня к учебнику!