web-dev-qa-db-ja.com

スクロール後にナビゲーションバーの色を変更しますか？

背景色なしでnavbarを設定するにはどうすればよいですか？

Divの後にスクロールすると、nav-barは新しい背景色を取得します（nav-barは上部に固定する必要があり、Bootstrapでnavbar-fixed-topを使用します）

いくつかのチュートリアルを試しましたが、成功しませんでした。

これはウェブサイトです： http://attafothman.olympe.in/
上にある黒いナビゲーションバーについて話している。

javascriptjqueryhtmlcsstwitter-bootstrap
48
user3641208

ウィンドウスクロール後にnavbarの色を変更する最も簡単な方法は次のとおりです。

フォローする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;
}

スクロールがnavbarの高さを超えると、固定navbarの背景色が白に変わります。

以下を参照してください JsFiddle

79
OzzyCzech

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

これは単純な純粋な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;}
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

これはjQueryを使用して実行できます。

fiddle へのリンクを次に示します。

ウィンドウがスクロールすると、ウィンドウの上部とウィンドウの高さとの距離が比較されます。 ifステートメントがtrueの場合、背景色は透明に設定されます。そして、一番上までスクロールすると、色が白に戻ります。

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

イベントリスナーを使用するための最適なアプローチ。特にFirefoxブラウザの場合は、このドキュメントを確認してください スクロールリンク効果 。Firefoxはdocument.body.scrollTopおよびdocument.documentElement.scrollTopを使用する代替手段をサポートしなくなりました。これで Yahya Essam からの答えが完成しました

2
ikhsannetwork

上記の回答に対するわずかなバリエーションですが、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. だから私はnavbarを取得するためにquerySelectorを使用しています
  2. ScrollYプロパティを追跡するスクロールイベントをウィンドウに追加しました
  3. 50を超えるかどうかを確認してから、アクティブクラスをnavbarに追加します。それが既に含まれている場合は、単にそれを削除するだけで、条件をよりキュレートして単純化できます。

this codepen を作成しました。

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

nderscore が付属するWordPressを使用します。したがって、テーマスクリプトを登録するときは、依存関係の配列のハンドルとして「jquery」と「underscore」を使用します。 WordPressを使用していない場合は、スクリプトの前にjQueryフレームワークとアンダースコアの両方を必ずロードしてください。

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

ソリューション、多分

0
Alexcertz

チェックjquery waypointshere

たとえば、フィドル JSFiddle

特定のdivまでスクロールすると、jqueryで背景色を変更します。

0
juree