Navbar changing color to scroll

Asked

Viewed 867 times

-1

I tried to make a navbar that at the beginning of the page becomes transparent and when rolling the scrool it changes the background of the Nav to black(ex). inserir a descrição da imagem aqui

code:

*{
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}
.header{
	width: 100%;
	height: 1000px;
	background-image: url(../6.jpg);
	background-size: cover;
}
.navbar{
	width: 100%;
	padding: 20px;
	position: fixed;
	top:0px;
	text-align: center;
	transition: .5s;
}
.navbar ul li{
	list-style-type: none;
	display: inline-block;
	padding: 10px 50px;
	color: white;
	font-size: 24px;
	font-family: sans-serif;
	cursor: pointer;
	border-radius: 10px;
}	
.navbar ul li:hover{
	background: orange;
}
.box{
	width: 80%;
	height: 2000px;
	background: green;
	margin: 20px auto;
	
}
<!doctype html>
<html><head>
        <meta charset="utf-8">
        <title>Documento sem título</title>
        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/css.css" />
    </head>
    <body>

	<div class="header">
	<div class="navbar">
		<ul>
			<li>Home</li>
			<li>Loja</li>
			<li>Contato</li>
			<li>Faq</li>
		</ul>
	</div>
	</div>
<div class="box">
		</div>

		
		<script>
		var nav = document.getElementById('nav');
		window.scroll=function(){
			if(window.pageYOffset>100){
				
				nav.style.background = "#007bff";
				
			}
			else{
				nav.style.background = "transparent";
			}
		}
		</script>
		
    </body>
</html>

html css

  • Include details about what you tried and exactly what you are trying to do. I recommend a Tour

  • I tried to make a navbar that at the beginning of the page becomes transparent and when rolling the scrool it changes the background of the Nav to black(ex).

2 answers

1

use 

document.body.onscroll = () => { //... função igual aqui ... }

And missing ID on navbar 

<div class="navbar" id="nav">

  • in case I would have q por from var Nav inside Document.body.onscroll?

  • instead of using "window.scroll=Function(){ " use "Document.body.onscroll = () => {"

  • I made igualzin and it was not

  • https://pastebin.com/XFDKZ5Tr Here it rotated correctly, navbar in blue, and turns white when it is at the top, the problem is that the color of the letter is also white, along with the background that is white

  • https://www.w3schools.com/code/tryit.asp?filename=FN4R3943AZXM

1


The problem was that you didn’t put the event on the scroll

var nav = document.getElementById('nav');
window.addEventListener("scroll", function(event) {
            if(window.pageYOffset>100){

                nav.style.background = "#007bff";

            }
            else{
                nav.style.background = "transparent";
            }
        });

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.