javascript - que - ¿Cambiar el color de la barra de navegación después de desplazarse?

menu que te sigue html

Question

¿Cómo puedo configurar la barra de navegación sin color de fondo?

Al desplazarme hacia abajo después de un div, la barra de navegación obtiene un nuevo color de fondo (la barra de navegación debe estar fija en la parte superior, uso navbar-fixed-top en Bootstrap)

He intentado algunos tutoriales pero no tuve éxito.

Este es el sitio web: http://attafothman.olympe.in/
Estoy hablando de esa barra de navegación negra en la parte superior.

Answer 1

Aquí es la forma más sencilla de cómo cambiar el color de la barra de navegación después del desplazamiento de la ventana:

Agregar follow JS a la cabeza:

$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top");
    $nav.toggleClass(''scrolled'', $(this).scrollTop() > $nav.height());
  });
});

y este código CSS

.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

El color de fondo de la barra de navegación fija cambiará a blanco cuando el desplazamiento exceda la altura de la barra de navegación.

Ver seguir JsFiddle

Answer 2

Aquí hay un ejemplo jsfiddle . Usar Jquery para cambiar el color de fondo en función de la posición del píxel de desplazamiento.

Aquí hay un violín usando bootstrap

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $(''#startchange'');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $(".navbar-default").css(''background-color'', ''#f0f0f0'');
       } else {
          $(''.navbar-default'').css(''background-color'', ''transparent'');
       }
   });
    }
});

Answer 3

Esto se puede hacer usando jQuery.

Aquí hay un enlace a un fiddle .

Cuando la ventana se desplaza, se compara la distancia entre la parte superior de la ventana y la altura de la ventana. Cuando la instrucción if es verdadera, el color de fondo se establece en transparente. Y cuando vuelves a la parte superior, el color vuelve a ser blanco.

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() > $(window).height()){
            $(".menu").css({"background-color":"transparent"});   
        }
        else{
            $(".menu").css({"background-color":"white"});
        }

    })
})

Answer 4

Ver jquery waypoints here

Fiddle por ejemplo JSFiddle

Cuando se desplaza a cierto div, cambie el color de fondo en jquery.

Answer 5

este es un simple javascript puro

var myNav = document.getElementById(''mynav'');
window.onscroll = function () { 
    "use strict";
    if (document.body.scrollTop >= 200 ) {
        myNav.classList.add("nav-colored");
        myNav.classList.remove("nav-transparent");
    } 
    else {
        myNav.classList.add("nav-transparent");
        myNav.classList.remove("nav-colored");
    }
};

Seguro que debes tener 2 clases

.nav-colored { background-color:#000; }
.nav-transparent { background-color:transparent;}

Answer 6

<script>
    $(document).ready(function(){
      $(window).scroll(function() { // check if scroll event happened
        if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
          $(".navbar-fixed-top").css("background-color", "#f8f8f8"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
        } else {
          $(".navbar-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent
        }
      });
    });
</script>

Answer 7

window.addEventListener(''scroll'', function (e) {
        var nav = document.getElementById(''nav'');
        if (document.documentElement.scrollTop || document.body.scrollTop > window.innerHeight) {
                nav.classList.add(''nav-colored'');
                nav.classList.remove(''nav-transparent'');
            } else {
                nav.classList.add(''nav-transparent'');
                nav.classList.remove(''nav-colored'');
            }
    });

mejor enfoque para usar el oyente de eventos. especialmente para el navegador Firefox, verifique este documento. Efectos vinculados con Scroll y Firefox ya no es compatible con document.body.scrollTop y con la alternativa de usar document.documentElement.scrollTop . Esto completa la respuesta de