Переключить цвет навигационной панели при начальной загрузке окна + jquery

Question

Я использую Bootstrap для создания панели навигации, я в основном хочу добиться двух вещей

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>