Проблема производительности с сокрытием заголовка при прокрутке в JavaScript - PullRequest
Новая
       2

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

0 голосов
/ 01 февраля 2019

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

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

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

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/Jimmey/wry54an7/4/

Ответы [ 2 ]

0 голосов
/ 01 февраля 2019

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

  • Удалите jQuery, поскольку вы только добавляете или удаляете класс с ним.
  • Кэшируйте свои селекторы, особенно когда они находятся вloop.
  • Отрегулируйте событие прокрутки , поскольку оно может запускаться с высокой скоростью.
  • Удалите функцию 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>
0 голосов
/ 01 февраля 2019

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

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 класса и не требовать встроенного стиля:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...