Проблема производительности со скрытым заголовком при прокрутке в javascript

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

начинается с большой высоты
скрывает при прокрутке вниз
показывает уменьшенную версию при прокрутке вверх
вырастает до полной высоты при полной прокрутке вверх

До сих пор я нашел способ, который работает. Но должен быть более эффективный способ. У меня есть функция, чтобы скрыть и показать панель навигации — и один интервал, чтобы снова увеличиться, когда я достиг вершины. Я пытался совместить их, но всегда терпел неудачу... Спасибо!

HTML

<!DOCTYPE html>
  <html>
    <head>
      <title>Test</title>
    </head>
    <body>
      <header id = "navbar" class = "navbar">
        <a href = "#home">Home</a>
        <a href = "#news">News</a>
        <a href = "#contact">Contact</a>
      </header>
    </body>
  </html>

JavaScript

var prevScrollpos = window.pageYOffset;
var shrinkHeader = 200;
function tellMeAStory() {
}

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

  prevScrollpos = currentScrollPos;
}

setInterval(function(){
  var scroll = getCurrentScroll();
   if (scroll < 10){
    $('.navbar').removeClass('shrink');
  } else {}
},250)

function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    };

CSS

body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
  height: 2000px;
}

header {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: all 0.3s;
  height: 200px;
}

.grow{
  height: 200px;
}

.shrink{
  height: 50px;
}

#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;
}

JSFiddle

https://jsfiddle.net/Джимми/wry54an7/4/

javascript jquery html css performance

01.02.2019 08:09

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

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

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

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

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

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

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

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

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

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

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

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

255

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Сочетать их не сложно. Я бы предложил сделать что-то вроде:

var prevScrollpos = window.pageYOffset;
var shrinkHeader = 200;

window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (currentScrollPos < 10){
    $('.navbar').removeClass('shrink');
  }
  else if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-200px";
    $('.navbar').addClass('shrink');
  }

  prevScrollpos = currentScrollPos;
}

function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
};

Вы также можете отслеживать последнюю операцию и, если она совпадает, не выполнять никаких операций над думом (так будет быстрее).

Также рекомендуется использовать классы вместо встроенного стиля. Возможно, вы захотите рассмотреть возможность использования классов для отображения/скрытия панели. У вас может быть только 3 класса и не требуется встроенный стиль:

Пример скрипки для классов

01.02.2019 08:52

Ответ принят как подходящий

Вот пара улучшений, которые я бы сделал:

Удалите jQuery, так как вы только добавляете или удаляете класс с ним.
Кэшируйте свои селекторы, особенно когда они находятся в цикле.
Регулируйте событие прокрутки, так как он может стрелять с высокой скоростью.
Удалите свою функцию setInterval, которая здесь не нужна.

var prevScrollpos = getCurrentScroll();
var shrinkHeader = 200;
var ticking = false;

// Cache it so you don't have to get it on every scroll event
var navbar = document.getElementById('navbar');

window.addEventListener('scroll', function() {
  var currentScrollPos = getCurrentScroll();

  if (!ticking) {
    window.requestAnimationFrame(function() {
      if (prevScrollpos > currentScrollPos) {
        navbar.style.top = '0';
      } else {
        navbar.style.top = '-200px';
        navbar.classList.add('shrink');
      }

      if (currentScrollPos < 10) {
        navbar.classList.remove('shrink');
      }

      prevScrollpos = currentScrollPos;
      ticking = false;
    });

    ticking = true;
  }
});

function getCurrentScroll() {
  return window.pageYOffset || document.documentElement.scrollTop;
};

body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
  height: 2000px;
}

header {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: all 0.3s;
  height: 200px;
}

.grow {
  height: 200px;
}

.shrink {
  height: 50px;
}

#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;
}

<header id = "navbar" class = "navbar">
  <a href = "#start">Start</a>
  <a href = "#one">One</a>
  <a href = "#two">Two</a>
</header>

01.02.2019 09:00

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

Jquery добавляет Html вместо макета

Вторая страница не перенаправляет на конкретную ссылку

Добавить 2 входа формы, когда пользователь нажимает кнопку

Анимация наведения на кнопку с помощью anime.js

Chart.js не отображается в моей функции (функция, используемая в ajax) jquery

При нажатии на кнопку все данные сбрасываются до 0 в таблице HTML

Как установить значение в текстовое поле на html-странице для динамически генерируемых полей флажков с использованием форм django?

Как изменить идентификаторы классов со значениями, указанными в массиве

У меня есть подозрение, что после возврата обновления в список он перейдет на начальную страницу

Проблема с кнопкой воспроизведения/паузы звука в многострочном режиме

Проблема производительности со скрытым заголовком при прокрутке в javascript

Ответы 2

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

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