Блог

Главная - Вопросы по программированию - Дополнительная навигация под баннером Hompage

Дополнительная навигация под баннером Hompage

#javascript #css

#javascript #css

Вопрос:

Я пытаюсь закодировать дополнительную навигацию под первым баннером домашней страницы с фиксированным заголовком, который остается при прокрутке.

Пример на: www.neffassociates.com (пожалуйста, прокрутите немного вниз)

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

1. позиция css: липкая

Ответ №1:

  • Событие прокрутки окна прослушивания
  • Проверьте, является ли ваша панель навигации верхним краем

Я сделал для вас пример, он даст представление о ссылке с помощью пера

Пример из codepen:

 var navbar = document.querySelector('.navbar').getBoundingClientRect();
var isSticky = false;

window.addEventListener('scroll', function() {
  var s = window.scrollY;
  var navbarCls = 'navbar--fixed';
  var nextEl = document.querySelector('.navbar   *');
  if (s >= navbar.top) {
    nextEl.style.paddingTop = navbar.height   "px";
    document.body.classList.add(navbarCls);
    isSticky = true;
  } else if(s < navbar.top amp;amp; isSticky) {
    document.body.classList.remove(navbarCls);
    isSticky = false;
    nextEl.removeAttribute('style');
  }
})

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

1. Спасибо! Как мне сохранить панель навигации перед всеми другими элементами при прокрутке? Он прячется за разделами при прокрутке? Спасибо, чувак!

2. Добро пожаловать. Попробуйте изменить z-index вашу панель навигации. Это должно решить проблему со скрытием

3. Отлично. Настройка z-индекса сработала. Еще один быстрый вопрос: когда я прокручиваю свою страницу вниз, это слишком быстро меняет положение панели навигации … другими словами, я бы хотел, чтобы это был плавный переход к фиксированному заголовку, когда элемент достигает верха страницы. Прямо сейчас он переходит к исправлению границы прокрутки с хорошим 3-дюймовым зазором на экране. Как я мог бы закодировать это, чтобы оно стало фиксированным заголовком, когда прокрутка достигает верхней части экрана?

4. Есть ли способ добавить некоторый код, в котором панель навигации не будет исправлена до тех пор, пока страница не достигнет вершины? Значит, переход просто естественный, а не «прыгнул» на вершину при запуске? Извините, если я не улавливаю смысла. Пытаюсь lol

5. Да, я не осознавал, что проблема с переходом — моя ошибка.. Обновлен ответ. Проблема в том, что если вы создадите элемент, position:fixed; этот элемент не будет занимать height/width на странице. Чтобы решить эту проблему, нам пришлось добавить padding-top к следующему элементу после панели навигации. padding-top Значение должно быть таким же, как высота панели навигации. Тогда это будет естественный переход.