Блог

Я использую bootstrap для своей навигационной панели, а бренд навигационной панели — это изображение. Я использую немного javascript, чтобы панель навигации автоматически скрывалась и отображалась на основе прокрутки. Но проблема в том, что мой бренд навигационной панели (изображение) по-прежнему отображается в верхней части веб-сайта, не исчезая при прокрутке, в отличие от других ссылок навигационной панели. Я пока не смог найти решение.

HTML

 <nav id="navbar" class="navbar navbar-expand-lg">
            <a  class="navbar-brand" href="#"><img class="lg" src="css/images/logo.png" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
        
            <div class="collapse navbar-collapse nav-links" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="#">Projects</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
  

css

 .lg {
  width: 70px;
  height: 70px;
}

.nav-item {
  padding-left: 1rem;
  padding-right: 1rem;
}

.nav-link {
  font-size: 18px;
  font-weight: 500;
}


#navbar {
  background-color: #0a192f;
  position: fixed;
  top: 0;
  width: 100%;
  height: 90px;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}
  

javascript

 var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}
  

Пожалуйста, помогите мне с этой проблемой. Большое спасибо!

Вы выполняете свой код javascript в событии document.onLoad? Я думаю, что ваша проблема в

Если вы используете jQuery, убедитесь, что вы запускаете этот фрагмент кода в

 $(function() { ... });
  

блок. Если вы используете ванильный JS, вы должны сделать это в событии onLoad:

 window.addEventListener('load', function(event) {
   // your code here 
});
  

Я делал это некоторое время назад с помощью jQuery, но я делаю это с классами. Если он превышает заданный порог (60 пикселей — высота моего заголовка), добавьте данный класс, иначе удалите его.

 $(function () {

      $(window).on('scroll', function () {
        checkForVerticalScrolling.call(this);
      });

      function checkForVerticalScrolling() {
        if ($(this).scrollTop() > 60) {
          $(".header-component").addClass('header-component-bg');
          $(".header-menu").addClass('header-menu-bg');
        } else {
          $(".header-component").removeClass('header-component-bg');
          $(".header-menu").removeClass('header-menu-bg');
        }
      }

      checkForVerticalScrolling.call(this);
    });
  

Надеюсь, это полезно.

Я нашел проблему.

 } else {
    document.getElementById("navbar").style.top = "-50px";
}

  

Это произошло из-за этой строки кода. Моя навигационная панель не исчезает полностью, половина ее по-прежнему остается вверху, но я не мог этого видеть, потому что цвет фона навигационной панели был установлен на прозрачный. итак, я изменил "-50px" на "-90px" , теперь навигационная панель полностью скрывается. Спасибо, что нашли время ответить на мой вопрос.