Make my NavBar change three times

Question

Make my NavBar change three times

Navigation

#1 by (0 votes)

1

introducir el código aquí I need the NavBar to change color to white in a section of the page I'm doing it with javascript and I can change it from white to black but I can not make the arrival to another section return to its original color I leave the JS code and the example on my server

link

$(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");
            }

        });

});

Black navbar HTML code

<!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>

html code of the white navbar

<!--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>

code of my 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';
 ?>

javascript

asked by Mariana Moreno Coultrain 19.06.2018 в 18:17

source

1 answer

Update multiple records in the BD, 1 time per record in Rails How to use ENCRYPTBYPASSPHRASE and DECRYPTBYPASSPHRASE in hibernate?

score 0 · Accepted Answer

Try it with else if like this:

$(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");
        }

    });

});