Navbar изменить цвет JavaScript не работает - PullRequest
Новая
       8

Navbar изменить цвет JavaScript не работает

0 голосов
/ 12 ноября 2018

как и здесь, я пытаюсь изменить панель навигации во время прокрутки вниз. Я прочитал этот вопрос:

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

Переход в Навбар при прокрутке вниз

Панель навигации Bootstrap меняет цвет на свиток

Я не могу заставить его работать на моем сайте, я не понимаю проблему:

HTML: 

<!-- Navbar -->
<nav class="navbar justify-content-center navbar-expand-sm navbar-dark fixed-top navbar-custom">
    <!-- Menu Links -->
    <ul class="navbar-nav" >
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Portfolio</a>
        </li>
            <!-- Wanted Logo -->
        <a class="navbar-brand" href="#">
        <img src="img/logo-light.png" alt="wanted_logo" style="width: 3vw;">
        </a>
        <li class="nav-item">
          <a class="nav-link" href="#">About us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</nav>
<!-- End Navbar -->

CSS: 

.navbar-custom {
    background-color: rgba(0,0,0,0.5);
}

.navbar-custom ul li{
    text-transform: uppercase;
    font-size: 14px;
    color: #fff;
    padding-top: 34px;

}

.navbar-custom img{
    margin-left: 20px;
    margin-right: 7px;
}

.navbar-custom.scrolled {
    background-color: red !important;
    transition: background-color 200ms linear;
}

JS: 

<script>$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-custom");
    $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
  });
});
</script>

Насколько я понимаю, при прокрутке дальше, чем размер навигационной панели, он должен изменить цвет.

Я думал, что это может быть проблемой, потому что высота панели навигации здесь явно не определена, поэтому я попытался добавить:

CSS 

.navbar-custom{
    background-color: rgba(0,0,0,0.5);
    height: 100px;
}

Это все еще не работало, поэтому я попытался также использовать другую версию JS, предложенную здесь: Изменение цвета навигационной панели после прокрутки?

JS: 

<script type="text/javascript">
    $(document).ready(function(){
      $(window).scroll(function() {
        if ($(document).scrollTop() > 100) {
          $(".navbar-custom").css("background-color", "#f8f8f8");
        } else {
          $(".navbar-custom").css("background-color", "blue");
        }
      });
    });
    </script>

Тот же результат, ничего не меняется.

Я новичок в использовании JS, что здесь не работает?

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Наконец, я заставил его работать, используя это (как часть руководства по кнопкам w3 back-to-top):

JS: 

<script>
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        var $nav = $(".navbar-custom");

    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 50) {
        $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
    }
    }
</script>

Ссылка на кнопку «Наверх» в w3school: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

Спасибо

0 голосов
/ 12 ноября 2018

Это потому, что вы используете непоследовательную прокрутку. У вас есть 

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

Однако вы проверяете это с помощью 

if ($(document).scrollTop() > 100) {...}

И у вас также есть: 

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

Сделайте все это либо $(window), либо $(document), и оно будет работать.

...