1

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

http://inkwonders.com/zejel

$(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&amp;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';
 ?>
3
  • Deberias de agregar tambien tu HTML
    – alanfcm
    Commented el 19 jun. 2018 a las 16:19
  • Hola, bienvenida a StackOverflow en español, te sugiero hacer el recorrido de bienvenida para que tengas una mejor idea sobre el funcionamiento de la pagina y puedas dar a conocer tu pregunta de mejor manera. Saludos. Commented el 19 jun. 2018 a las 16:21
  • listo eh añadido el codigo Commented el 19 jun. 2018 a las 16:25

1 respuesta 1

0

Intentalo con else if asi:

$(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 if (windowHeight >= servicio) {
            header.classList.remove("sticky");
        }

    });

});
4
  • 1
    Funciona pero hace el cambio muy brutal parpadea un par de veces al hacer el cambio Commented el 19 jun. 2018 a las 16:50
  • Averigua sobre la funcion debounce en javascript. Por otro lado, si esta respuesta te ayudo, marcala como correcta.
    – alanfcm
    Commented el 19 jun. 2018 a las 16:52
  • de ante manos mil gracias ya la marque como correcta Commented el 19 jun. 2018 a las 17:00
  • De nada y bienvenida a StackOverflow en Español.
    – alanfcm
    Commented el 19 jun. 2018 a las 17:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.