Изменение цвета навигационной панели после прокрутки?

Ответ 1

Вот простейший способ изменения цвета навигатора после прокрутки окна:

Добавьте JS в голову:

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

и этот код CSS

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

Цвет фона фиксированного навигатора будет изменен на белый, если прокрутка превысит высоту навигационной панели.

См. ниже JsFiddle

Ответ 2

Вот пример jsfiddle. Использование JQuery для изменения цвета фона на основе положения прокрутки.

Вот скрипт с использованием начальной загрузки

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

Ответ 3

это простой чистый javascript

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

уверен, что у вас должно быть 2 класса

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

Ответ 4

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

Ответ 5

Это можно сделать с помощью jQuery.

Вот ссылка на скрипку.

Когда окно прокручивается, сравнивается расстояние между верхней частью окна и высотой окна. Когда оператор if равен true, цвет фона устанавливается прозрачным. И когда вы прокручиваете обратно наверх, цвет снова становится белым.

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

    })
})

Ответ 6

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

лучший подход к использованию прослушивателя событий. особенно для браузера Firefox, проверьте этот документ Связанные с прокруткой эффекты, и Firefox больше не поддерживает document.body.scrollTop и альтернативу использованию document.documentElement.scrollTop. Это завершает ответ Yahya Essam

Ответ 7

Небольшая вариация к вышеупомянутым ответам, но с 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';
    }
});

Ответ 8

Я использую WordPress, который поставляется с Underscore. Поэтому, когда вы регистрируете свои сценарии темы, вы должны использовать "jquery" и "underscore" в качестве дескриптора для массива зависимостей. Если вы не используете WordPress, убедитесь, что вы загрузили как jQuery framework, так и Underscore перед вашими скриптами.

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

Чтобы сделать это демо (помните, что он требует как jQuery, так и 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);

Ответ 9

1. Поэтому я использую querySelector для получения навигационной панели
2. Я добавил в окно событие прокрутки для отслеживания свойства scrollY
3. Я проверяю, если он выше 50, тогда я добавляю активный класс к navbar, иначе, если он уже содержит его, я просто удаляю его, и я уверен, что условия могут быть более короткими и упрощенными.

Я сделал это косепен, чтобы помочь вам!

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')
  }
})

Ответ 10

Отметьте jquery waypoints здесь

Сценарий, например JSFiddle

Когда прокручивается до определенного div, измените цвет фона в jQuery.

Ответ 11

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

Ответ 12

Недавно я сделал это немного по-другому, поэтому подумал, что поделюсь, хотя и очень поздно!

Во-первых, HTML, обратите внимание, что в заголовке есть только один класс:

<body>

<header class="GreyHeader">
</header>


</body>

И CSS:

body {
height: 3000px;
}

.GreyHeader{
height: 200px; 
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;

}

.FireBrickRed {
height: 100px;
background-color: #b22222;
position: fixed;
top:200;
width: 100%;
}

.transition {
  -webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
  transition: height 2s;
}

HTML использует только класс .greyHeader, но в CSS я создал другой класс для вызова, когда прокрутка достигла определенной точки сверху:

$(function() {
    var header = $(".GreyHeader");
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('GreyHeader').addClass("FireBrickRed ");
            header.addClass("transition");
        } else {
            header.removeClass("FireBrickRed ").addClass('GreyHeader');
            header.addClass("transition");
        }
    });
});

проверьте эту скрипку: https://jsfiddle.net/29y64L7d/1/