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

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

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

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>

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

— 15.03.2019 17:02

Я связал jquery с вершиной html

— 15.03.2019 17:03

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

— 15.03.2019 17:04

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

— 15.03.2019 17:06

Ну, это действительно полезно

— 15.03.2019 17:18

Я добавил ответ для вас ниже.

— 15.03.2019 17:23

@Buszek ознакомьтесь с моими ответами ниже и спросите меня, нужна ли вам дополнительная помощь

— 15.03.2019 17:47

javascript jquery html css

15.03.2019 16:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

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

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() > 500) {
    console.info($(window).scrollTop());
      $('#datacss').css("background-color", "black");
    }
    if ($(window).scrollTop() < 500) {
      console.info($(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>

15.03.2019 17:46

Другие вопросы по теме

Несколько скриптов или один? Может ли он поддерживать дубликаты?

Предупреждающее сообщение слайдера JQuery отключает кнопку отправки

Дождитесь завершения анимации CSS перед прокруткой в fullpage.js

JQuery скрыть родительский ul

Найти диапазон с определенным классом после ввода с помощью jquery

Как отображать ссылку условно на основе языка сайта с помощью jQuery

Как запустить событие на входе, когда значение исходит из функции jquery

Переключить aria-pressed=true/false в ASP.NET MVC View, вызывая ошибку

JQuery - доступ к значениям после поиска

Обновить частичный вид, чтобы перезагрузить раскрывающийся список видов

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

Ответы 1

Другие вопросы по теме

Похожие вопросы