在窗口滚动引导程序+ jQuery上切换导航栏颜色

Question

我正在使用引导程序创建导航栏，我基本上想实现两件事

1. 当我向下滚动页面20％时，导航栏应更改其颜色，如果我回到顶部，则导航条应恢复其原始颜色。

2. 当引导程序的折叠打开时，即可以看到折叠的div时，无论窗口滚动如何，我都希望我的div保持其原始颜色。

    <div class="navbar-collapse nav-mobile-collapse collapse show" id="navbarResponsive" style=""> 

的HTML

<nav  class="navbar-expand-lg navbar-dark fixed-top d-block d-lg-none">
 <div id="nav-mobile" class=" d-flex flex-row nav-flex-row">
    <div class="p-3 mr-auto"><img class="img img-fluid" 
      src="img/png/logo.png" /></div>
  <div class="p-3">
    <span class="navbar-toggler navbar-toggler-right" style="background- 
       color:transparent;color:white" data-toggle="collapse"
      data-target="#navbarResponsive" aria-controls="navbarResponsive" aria- 
      expanded="false" aria-label="Toggle navigation">
        <i class="fa fa-bars fa-2x" aria-hidden="false" style="color:white"> 
        </i>
    </span>
  </div>
</div>

<div class="collapse navbar-collapse nav-mobile-collapse" 
  id="navbarResponsive">
  <div id="top-menu"  class="navbar-container collapsebar-main">
    <div style="flex:1" class="">
        <a class="active js-scroll-trigger " href="#about">About</a>
    </div>
    <div style="flex:1">
        <a class=" js-scroll-trigger" href="#product">Products</a>
    </div>
    <div style="flex:1">
        <a class=" js-scroll-trigger" href="#partners">Partners</a>
    </div>
    <div style="flex:1" class="testimonial-nav">
        <a class=" js-scroll-trigger" href="#testimonial">Testimonials</a>
    </div>
  </div>
 </div>
</nav>

JAVASCRIPT

$(window).scroll(function(){

  document.getElementById('nav-mobile').style.webkitTransition = 'opacity 
  1s';
  document.getElementById('nav-mobile').style.mozTransition = 'opacity 1s';

  var windowpos = $(window).scrollTop();

  $('#navbarResponsive')
   .on('shown.bs.collapse', function() {
   document.getElementById('nav-mobile').style.backgroundColor = '#1c223f';
  });

  .on('hidden.bs.collapse', function() {
    if (windowpos > 50) {
      document.getElementById('nav-mobile').style.backgroundColor = 
      '#1c223f';
    }
    else {
      document.getElementById('nav-mobile').style.backgroundColor = 
      'TRANSPARENT';
    }
  });

 if ( windowpos > 50) {
    document.getElementById('nav-mobile').style.backgroundColor = '#1c223f';
  }  
});

Answer 1

您需要将$('#navbarResponsive')移出滚动，因为只有在窗口滚动时才会初始化。

我改变了几样，这里是它的演示。

 $(window).scroll(function() { document.getElementById('nav-mobile').style.webkitTransition = 'opacity 1s'; document.getElementById('nav-mobile').style.mozTransition = 'opacity 1s'; var windowpos = $(window).scrollTop(); if (windowpos > 50 || $("#navbarResponsive").hasClass("show")) { document.getElementById('nav-mobile').style.backgroundColor = '#1c223f'; } else { document.getElementById('nav-mobile').style.backgroundColor = ''; } }); $('#navbarResponsive') .on('shown.bs.collapse', function() { document.getElementById('nav-mobile').style.backgroundColor = '#1c223f'; }).on('hidden.bs.collapse', function() { var windowpos = $(window).scrollTop(); if (windowpos > 50) { document.getElementById('nav-mobile').style.backgroundColor = '#1c223f'; } else { document.getElementById('nav-mobile').style.backgroundColor = ''; } }); 

 body { height: 1000px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <nav class="navbar-expand-lg navbar-dark fixed-top d-block d-lg-none"> <div id="nav-mobile" class=" d-flex flex-row nav-flex-row"> <div class="p-3 mr-auto"><img class="img img-fluid" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSVCT-lYaIPfWsXbMZpFleT5-m-lA4Qbs9YhG44nDGAw7XEYjqB" /></div> <div class="p-3"> <span class="navbar-toggler navbar-toggler-right" style="background- color:transparent;color:white" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria- expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars fa-2x" aria-hidden="false" style="color:white"> </i> </span> </div> </div> <div class="collapse navbar-collapse nav-mobile-collapse" id="navbarResponsive"> <div id="top-menu" class="navbar-container collapsebar-main"> <div style="flex:1" class=""> <a class="active js-scroll-trigger " href="#about">About</a> </div> <div style="flex:1"> <a class=" js-scroll-trigger" href="#product">Products</a> </div> <div style="flex:1"> <a class=" js-scroll-trigger" href="#partners">Partners</a> </div> <div style="flex:1" class="testimonial-nav"> <a class=" js-scroll-trigger" href="#testimonial">Testimonials</a> </div> </div> </div> </nav>