web-dev-qa-db-fra.com

Changer la couleur de la barre de navigation après le défilement?

Comment définir la barre de navigation sans couleur d'arrière-plan?

Lorsque vous faites défiler l'écran après une division, la barre de navigation obtient une nouvelle couleur d'arrière-plan (la barre de navigation doit être fixée en haut, j'utilise navbar-fixed-top dans Bootstrap).

J'ai essayé des tutoriels mais je n'ai pas réussi.

Ceci est le site web: http://attafothman.olympe.in/
Je parle de cette barre de navigation noire en haut.

javascriptjqueryhtmlcsstwitter-bootstrap
48
user3641208

Voici le moyen le plus simple de changer la couleur de la barre de navigation après le défilement de la fenêtre:

Ajouter suivez JS à la tête:

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

et ce code CSS

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

La couleur d'arrière-plan de la barre de navigation fixe sera changée en blanc lorsque le défilement dépasse la hauteur de la barre de navigation.

Voir suivre JsFiddle

79
OzzyCzech

Voici un exemple jsfiddle . Utilisation de JQuery pour modifier la couleur d’arrière-plan en fonction de la position du pixel de défilement.

Voici un violon utilisant 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');
       }
   });
    }
});
41
DylanH

c'est un simple javascript pur

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

bien sûr tu dois avoir 2 cours

.nav-colored { background-color:#000; }
.nav-transparent { background-color:transparent;}
14
Yahya Essam
<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>
7
szharas

Cela peut être fait en utilisant jQuery.

Voici un lien vers un violon .

Lorsque la fenêtre défile, la distance entre le haut de la fenêtre et la hauteur de la fenêtre est comparée. Lorsque l'instruction if est vraie, la couleur d'arrière-plan est définie sur transparent. Et lorsque vous faites défiler vers le haut, la couleur redevient blanche.

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

    })
})
5
soarjay
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');
            }
    });

meilleure approche pour utiliser un auditeur d’événement. en particulier pour le navigateur Firefox, consultez cette documentation effets liés au défilement et Firefox ne prend plus en charge document.body.scrollTop et peut également utiliser document.documentElement.scrollTop. Ceci complète la réponse de Yahya Essam

2
ikhsannetwork

Légère variation des réponses ci-dessus, mais avec Vanilla JS:

var nav = document.querySelector('nav'); // Identify target

window.addEventListener('scroll', function(event) { // To listen for event
    event.preventDefault();

    if (window.scrollY <= 150) { // Just an example
        nav.style.backgroundColor = '#000'; // or default color
    } else {
        nav.style.backgroundColor = 'transparent';
    }
});
1
AshNaz87
  1. J'utilise donc querySelector pour obtenir la barre de navigation
  2. J'ai ajouté un événement de défilement à la fenêtre pour suivre la propriété scrollY
  3. Je vérifie s'il est supérieur à 50, puis j'ajoute la classe active à la barre de navigation, sinon, si elle la contient déjà, je la supprime simplement et je suis à peu près sûr que les conditions peuvent être plus détaillées et simplifiées.

J'ai fait ce codepen pour vous aider!

const navbar = document.querySelector('#nav')

window.addEventListener('scroll', function(e) {
  const lastPosition = window.scrollY
  if (lastPosition > 50 ) {
    navbar.classList.add('active')
  } else if (navbar.classList.contains('active')) {
    navbar.classList.remove('active')
  } else {
    navbar.classList.remove('active')
  }
})
1
Smakosh

J'utilise WordPress qui vient avec nderscore . Ainsi, lorsque vous enregistrez vos scripts de thème, vous devez utiliser 'jquery' et 'underscore' comme descripteur pour le tableau des dépendances. Si vous n'utilisez pas WordPress, assurez-vous de charger à la fois le framework jQuery et Underscore avant vos scripts.

CodePen: https://codepen.io/carasmo/pen/ZmQQYy

Pour faire cette démo (souvenez-vous qu'il faut à la fois jQuery et Underscore).

HTML:

<header class="site-header">
  <div class="logo">
  </div>
  <nav>navigation</nav>
</header>

<article>
  Content with a forced height for scrolling.  Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling
</article>

CSS:

body,
html {
    margin: 0;
    padding: 0;
    font: 100%/180% sans-serif;
    background: #eee;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

article {
    height: 2000px;
    padding: 5%;
    background: #fff;
    margin: 2% auto;
    max-width: 900px;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
}


.site-header {
    background: #fff;
    padding: 20px 5%;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.23);
    transition: all .5s ease-in-out;
    -web-kit-position: sticky;
    position: sticky;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

}

.logo {
    background-image: url('the-path-to-the-logo.svg');
    background-repeat: no-repeat;
    background-position: center center;
    width: 200px;
    height: 60px;
    background-size: contain;
    transition: width .5s ease-in-out, height .5s ease-in-out;
}

.site-header nav {
    text-align: right;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
}

.site-header.is-scrolling {
    opacity: .8;
    background: tomato;
    padding: 10px 5%;
}

.site-header.is-scrolling .logo {
    height: 40px;
    width: 100px;
}

jQuery:

( function( window, $, undefined ) {

    'use strict';

    ////////////// Begin jQuery and grab the $ ////////////////////////////////////////

    $(document).ready(function() {

      function is_scrolling() {

        var $element = $('.site-header'),
            $nav_height = $element.outerHeight( true );

        if ($(this).scrollTop() >= $nav_height ) { //if scrolling is equal to or greater than the nav height add a class

          $element.addClass( 'is-scrolling');

        } else { //is back at the top again, remove the class

          $element.removeClass( 'is-scrolling');
        }

      }//end is_scrolling();

    $(window).scroll(_.throttle(is_scrolling, 200));


  }); //* end ready


})(this, jQuery);
1
Christina
$(window).on('activate.bs.scrollspy', function (e,obj) {

  if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
    return;
  }
  
  var isBGLight = $(obj.relatedTarget).hasClass('nav_white');
  var isBGDark = $(obj.relatedTarget).hasClass('nav_blue');
  $('.menu').removeClass('nav_white');
  $('.menu').removeClass('nav_blue');
  if(isBGDark)
  {
    $('.menu').addClass('nav_white');
  }else if(isBGLight)
  {
    $('.menu').addClass('nav_blue');
  }
  /*var isScrolled = $(document).scrollTop() > 1;
    $('.menu').toggleClass('scrolled', isScrolled);
    $(".demos").toggleClass("demo");
    $(".demos").toggleClass("demo1");
  var posicionActual = $(document).scrollTop();
  $.each($('.nav_transparent'),function(){
    if ($(this).position().top < posicionActual){
      $("nav.menu").removeClass("nav_white");
      $("nav.menu").removeClass("nav_blue");
      $("nav.menu").addClass("nav_transparent");
      $(".demos").removeClass("demo");
      $(".demos").addClass("demo1");
      $(".cls").removeClass("cls2");
      $(".cls").addClass("cls1");
      $(".cl").removeClass("cl2");
      $(".cl").addClass("cl1");
      $(".hamb-bottom").css({"background-color": "#fff"});
      $(".hamb-middle").css({"background-color": "#fff"});
      $(".hamb-top").css({"background-color": "#fff"});
    }
  });
  $.each($('.nav_blue'),function(){
    if ($(this).position().top <= posicionActual){
      $("nav.menu").removeClass("nav_transparent");
      $("nav.menu").removeClass("nav_white");
      $("nav.menu").addClass("nav_blue");
      $(".demos").removeClass("demo1");
      $(".demos").addClass("demo");
      $(".cls").removeClass("cls2");
      $(".cls").addClass("cls1");
      $(".cl").removeClass("cl2");
      $(".cl").addClass("cl1");
      $(".hamb-bottom").css({"background-color": "#fff"});
      $(".hamb-middle").css({"background-color": "#fff"});
      $(".hamb-top").css({"background-color": "#fff"});
    }
  });
  $.each($('.nav_white'),function(){
    if ($(this).position().top <= posicionActual){
      $("nav.menu").removeClass("nav_blue");
      $("nav.menu").removeClass("nav_transparent");
      $("nav.menu").addClass("nav_white");
      $(".demos").removeClass("demo");
      $(".demos").addClass("demo1");
      $(".cls").removeClass("cls1");
      $(".cls").addClass("cls2");
      $(".cl").removeClass("cl1");
      $(".cl").addClass("cl2");
      $(".hamb-bottom").css({"background-color": "#4285f4"});
      $(".hamb-middle").css({"background-color": "#4285f4"});
      $(".hamb-top").css({"background-color": "#4285f4"});
    }
  });*/
});
$(window).on("scroll", function(){
  if($(document).scrollTop() < 10)
    {
      $('.nav').removeClass('nav_white');
      $('.nav').removeClass('nav_blue');
      $('.nav').removeClass('nav_transparent');
      $('.nav').addClass('nav_transparent');
  }
});

les solutions, peut-être

0
Alexcertz

Vérifiez jquery waypointsici

Violon par exemple JSFiddle

Lorsque vous faites défiler jusqu'à un certain div, changez la couleur de fond dans jquery.

0
juree