introducir el código aquí
Necesito que la NavBar cambie de color a blanco en una seccion de la pagina lo estoy haciendo con javascript y lo consigo logra cambiar de blanco a negro pero no logro hacer que llegada a otra sección regrese a su color original dejo el codigo JS y el ejemplo en mi servidor
$(document).ready(function() {
$(window).scroll(function(){
var windowHeight = $(window).scrollTop();
var nosotros = $("#nosotros").offset();
var servicio = $("#servicio").offset();
var header = document.getElementById("navwebalt");
nosotros = nosotros.top;
servicio = servicio.top;
if(windowHeight >= nosotros && windowHeight !== servicio ){
header.classList.add("sticky");
}else{
header.classList.remove("sticky");
}
});
});
Codigo HTML de navbar negra
<!DOCTYPE html>
<html>
<head>
<title>Zejel</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<section id="navwebalt" style="background-color:black">
<!-- <div id="navbar">-->
<!--Seccion dividida en 3 bloques-->
<a href="index.php">
<div class="logoHeaderalt"></div>
</a>
<div class="divdosalt">
<a href="/">
<div class="twitteralt"></div>
</a>
<a href="/">
<div class="facebookalt"></div>
</a>
</div>
<div class="divunoalt">
<div class="nosotrosalt">
<a href="index.php#nosotros">
<p>Nosotros</p>
</a>
</div>
<div class="servicioalt">
<a href="index.php#servicio">
<p>Servicio</p>
</a>
</div>
<div class="diarioalt">
<a href="diario.php">
<p>Diario</p>
</a>
</div>
<div class="consejoAcademicoalt">
<a href="concejoacademico.php">
<p>Consejo<br> Academico</p>
</a>
</div>
<div class="contactoalt">
<a href="index.php#contacto">
<p> Contacto</p>
</a>
</div>
</div>
<hr style="color:white;margin:0% auto; width:95% ">
</section>
<br> <br> <br> <br><br><br>
</head>
codigo html del navbar blanco
<!--Codigo desarrollado por Guillo para INK-->
<!DOCTYPE html>
<html>
<head>
<title>Zejel</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<section id="navweb" >
<!-- <div id="navbar">-->
<!--Seccion dividida en 3 bloques-->
<a href="index.php">
<div class="logoHeader"></div>
</a>
<div class="divdos">
<a href="/">
<div class="twitter"></div>
</a>
<a href="/">
<div class="facebook"></div>
</a>
</div>
<div class="divuno">
<div class="nosotros">
<a href="#nosotros">
<p>Nosotros</p>
</a>
</div>
<div class="servicio">
<a href="#servicio">
<p>Servicio</p>
</a>
</div>
<div class="diario">
<a href="diario.php">
<p>Diario</p>
</a>
</div>
<div class="consejoAcademico">
<a href="concejoacademico.php">
<p>Consejo<br> Academico</p>
</a>
</div>
<div class="contacto">
<a href="index.php#contacto">
<p> Contacto</p>
</a>
</div>
</div>
</section>
</head>
codigo de mi index
<?php
include 'header.php';
?>
<body>
<br><br><br><br><br>
<!--En este div van a ir los disvs para dividir la pagina en dos-->
<div class="grande">
<div class="izquierda">
<div class="logo">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam
felis, ultricies nec, pellentesque eu, pretium quis, sem.
Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim
justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
</p>
</div>
<div class="lineanegra">
</div>
</div>
<div class="derecha">
<div class="reproductor">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/WUIVD_EXlno?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
<div style="background:black" id="nosotros">
<?php
include 'headerBlack.php'
?>
<?php
include 'nosotros.php'
?>
</div>
<div id="servicio">
<?php
include 'servicios.php'
?>
</div>
<div id="contacto">
<?php
include 'contacto.php'
?>
</div>
<?php
include 'footer.php';
?>