Блог

Главная - Вопросы по программированию - У меня проблема с функцией прокрутки вниз навигационной панели

У меня проблема с функцией прокрутки вниз навигационной панели

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я хочу, чтобы в верхней части меню сайта было вот такое. Когда пользователь прокручивает вниз, он должен изменить фон и показать другой логотип.

Почему эта функция не работает? Она просто все время показывает черный фон. Я хочу, чтобы она отображалась при прокрутке вниз на несколько пикселей.

https://codepen.io/anon/pen/XJdVYr — я хочу сделать это

 $(document).ready(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() > 50) {
      $('#menu-logo').slideDown(500);
    }
    if ($(window).scrollTop() < 50) {
      $('#menu-logo').slideUp(500);
    }
  });
});  
 .navbar {
  width: 950px;
  position: fixed;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.navbar .navbar-brand {
  position: absolute;
  left: 0;
}

.navbar .collapse {
  padding-top: 40px;
  margin-left: 225px;
}

.navbar a {
  text-decoration: none;
  border-right: 1px solid rgb(153, 153, 153);
  font-size: 14px;
  font-family: 'Mada', sans-serif, Regular;
  color: #000000;
  padding: 10px 40px;
}

.navbar a:last-child {
  border-right: none;
}

.navbar #menu-logo {
  background: rgba(51, 51, 51);
  width: 950px;
  position: fixed;
  height: 95px;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 95px;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light">
  <img class="navbar-brand" id="logo" src="images/img2-logo.png" alt="">
  <img id="menu-logo" src="images/img-menu.png" alt="">
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <a class="nav-item nav-link" href="#mission">MISSION</a>
    <a class="nav-item nav-link" href="#clients">CLIENTS</a>
    <a class="nav-item nav-link" href="#products">PRODUCTS</a>
    <a class="nav-item nav-link" href="#contact">CONTACT</a>
  </div>
</nav>

Комментарии:

1. В вашем фрагменте отсутствует ссылка на jQuery.js , которая является причиной проблемы. Так ли это и в вашей рабочей среде?

2. Я связал jquery с верхней частью html

3. Тогда я отредактировал один из ответов на вопрос для вас

4. Моя логика js в порядке, чем?

5. Что ж, это действительно полезно

Ответ №1:

Смотрите этот код, чтобы решить эту проблему. по вашему желанию css будет меняться при прокрутке

 $(document).ready(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() > 500) {
    console.log($(window).scrollTop());
      $('#datacss').css("background-color", "black");
    }
    if ($(window).scrollTop() < 500) {
      console.log($(window).scrollTop());
      $('#datacss').css("background-color", "white");
    }
  });
});  
 .too-height {
  min-height: 2500px;
}

.navbar {
  width: 950px;
  position: fixed;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  height: 100em;
}

.navbar .navbar-brand {
  position: absolute;
  left: 0;
}

.navbar .collapse {
  padding-top: 40px;
  margin-left: 225px;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="too-height" id="datacss">

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <img class="navbar-brand" id="logo" src="images/img2-logo.png" alt="">
  <img id="menu-logo" src="images/img-menu.png" alt="">
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <a class="nav-item nav-link" href="#mission">MISSION</a>
    <a class="nav-item nav-link" href="#clients">CLIENTS</a>
    <a class="nav-item nav-link" href="#products">PRODUCTS</a>
    <a class="nav-item nav-link" href="#contact">CONTACT</a>
  </div>
</nav>

</div>