0

estoy haciendo un menú fijo el cual al hacer scroll este cambia de color de fondo, lo he logrado con jquery pero quiero hacerlo con javascript puro ya que a manera de ejercicio quiero saber como hacerlo, ya lo he intentando y no logro que el efecto se logre.

este es el código jquery:

 $(window).on('scroll', function(){
    if ($(window).scrollTop()){
        $('nav').addClass('blue');
    }else{
        $('nav').removeClass('blue');
    }
});

y esto es hasta ahora lo que e hecho con javascript puro:

var sticky = document.querySelector('.contenido nav');

sticky.addEventListener("scroll", function(){
    if (sticky.scrollTop){
        sticky.style.className = "blue";
    }else{
        sticky.classList.remove('blue');
    }
});

utilizó la variable sticky para seleccionar la etiqueta nav que se encuentra dentro de una etiqueta div con clase contenido, cuando hago scroll se le asigna la clase blue, no se si ahi radica mi error en que no se le está asignado bien la clase o el evento scroll no se esta empleando bien. Ojala me puedan ayudar.

dejo el codigo en codepen de lo que quiero lograr.

https://codepen.io/anon/pen/wmxvLV

4
  • Lo probe con Mozilla Firefox 52 y funciona el 3 abr. 2018 a las 13:00
  • Aunque ya te dieron una buena respuesta, sólo quería puntualizar que en tu versión javascript puro, le asignas el manejador de evento al DIV, cuando en el Jquery original estaba asignado al elemento window. En tu versión alternativa, debiera también estar asignado al window, creo.
    – quinqui
    el 3 abr. 2018 a las 13:17
  • el addEventlistener lo tiene el sticky , lo debe tener el window que es lo que hace el scroll el 3 abr. 2018 a las 13:39
  • Cierto eso era lo que me confundía incluso lo hice asignarle al elemento window el evento pero no me funciono por eso es que decido aplicarlo directamente a la variable que cree.
    – CACZ
    el 4 abr. 2018 a las 3:44

2 respuestas 2

2

Solo tiene que ajustarse a las funciones para obtener los valores reales, tanto $(window).scrollTop() como $(window).on('scroll'...

El código quedaría así:

var sticky = document.querySelector('.contenido nav');
window.onscroll = function() {
     if (window.pageYOffset){
         sticky.classList.add("blue");
     }else{
         sticky.classList.remove('blue');
     }
 };

1
  • Muchas gracias por la ayuda con esto amplio mas mi conocimiento sobre javascript
    – CACZ
    el 4 abr. 2018 a las 3:42
0

Bueno una solución para lo que planteas es lo siguiente:
Cuando te hayas desplazado 50 pixeles desde la parte superior se agregue la clase black, y en el caso contrario que se quite la clase black. Entonces teniendo esa lógica solamente queda llamar el evento onscrollde javascript para que se ejecute la función.
Dejaré comentado el código javascript para que te quede mas claro.

//le asigno a la variable sticky el selector de nav con la clase contenido
var sticky = document.querySelector('.contenido nav');
//llamo al evento "onscroll" para que ejecute mi función
window.onscroll = function() {scrollFunction()};

//la función que se ejecuta al llamar al evento onscroll
function scrollFunction() {
//si me separo 50 pixeles de la parte superior
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
       sticky.className = "black";
    } else {
        sticky.className = "";
    }
}
body{
    font-family: Quicksand;
}
nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    padding: 10px 100px;
    box-sizing: border-box;
    transition: .3s;
}

.black{
    /* background: rgba(0,0,0,0.8); */
    background-color: steelblue;
    height: 100px;
    padding: 10px 100px;
}

nav .logo{
    padding: 22px 20px;
    height: 80px;
    float: left;
    font-size: 24px;
    transition: .3s;
}

nav.black .logo{
    color: #fff;
}

nav ul{
    list-style: none;
    float:right;
    margin: 0;
    padding: 0;
    display: flex;

}

nav ul li{
    list-style: none;
}

nav ul li a{
    line-height: 80px;
    color: #151515;
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
    transition: .3s;
    font-weight: bold;
}
nav ul li a:hover{
    outline: none;
}

nav.black ul li a{
    color: #fff;
}

nav ul li a.active{
    /* background: #E2472F; */
    background: rgba(0,0,0,0.8); 
    color: #fff;
    border-radius: 10px;
}

section.sec1{
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    /* background-repeat: no-repeat; */
}

.contenido2{
    margin-top: 100px;
    text-align: justify;
    width: 60%;
    margin: 50px auto;
    flex-direction: column;
}
.contenido2 h1{
    text-align: center;
}
<div class="contenido">  
<nav>
    <div class="logo">LSCA.</div>

    <ul>
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Acerca de</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contacto</a></li>
      <li><a class="active" href="#">sesiones</a></li>
    </ul>
  </nav>

  <section class="sec1"></section>
  <section class="contenido2">

    <h1>Lorem</h1>
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi! Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi!
    </p>
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi! Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi!
    </p>
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi! Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi!
    </p>
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi! Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi!
    </p>
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi! Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi!
    </p>
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi! Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi!
    </p>
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi! Lorem ipsum dolor
      sit amet consectetur adipisicing elit. Officiis blanditiis vel deserunt iure aut consectetur qui sapiente minus repellendus magni corporis pariatur error velit aperiam aliquid nihil repellat, voluptatum eligendi!
    </p>
  </section>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

PD: Deje tal cual tenias tus elementos en el ejecutable que dejaste

2
  • Hola gracias por tomarte el tiempo en ayudarme, una pregunta ¿en javascript a diferencia de jquery debo poner los pixeles los cuales se desplazará hacia abajo el scroll? lo comento porque con jquery eso no se pone, y solo se indica que cuando el scroll se haga se aplique ciertas reglas como el asignar las clases que se pide se ejecuten a la hora de hacer el scroll
    – CACZ
    el 3 abr. 2018 a las 13:17
  • lo que pasa es que lo hice para poder asignar una clase, puedes asignarlu 1 pixel si quieres para que el cambio se haga bases del ejemplo el 3 abr. 2018 a las 13:21

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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