Липкий заголовок с эффектом скольжения вниз - PullRequest
Новая
       7

Липкий заголовок с эффектом скольжения вниз

0 голосов
/ 20 января 2019

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

как-то так http://cssdeck.com/labs/sticky-header-with-slide-down-effect у этого скрипта есть какой-то сбой. 

jQuery(document).ready(function ($) {
    $(window).scroll(function () {

        if ($(window).scrollTop() >= 100) {
            $('.navarea').addClass('fixed-header');

        } else {
            $('.navarea').removeClass('fixed-header');
        }
    });
});

вот css 

.navarea {

    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.5s ease-in-out;
}

.fixed-header {
    position: fixed;
    background: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    padding-bottom: 0;
    top: 0;
    z-index: 5;
    transition: all 0.5s ease-in-out;
}

Живой URL: https://codepen.io/pagol/pen/XovvGJ

1 Ответ

0 голосов
/ 21 января 2019

Вот пример, который

  • создает глубокий клон элемента навигации (другие решения глючили после большого количества испытаний)
  • использует CSS3 transition для клонированной навигации
  • использует механизм обратного вызова debounce для использования функций, запускаемых при прокрутке
  • использует position sticky и visibility для исходного элемента для улучшения эффекта 

// https://github.com/micro-js/debounce/blob/master/lib/index.js
function debounce(fn, time) {
  var pending = null
  return function() {
    if (pending) clearTimeout(pending)
    pending = setTimeout(run, time)
    return function() {
      clearTimeout(pending)
      pending = null
    }
  }
  function run() {
    pending = null
    fn()
  }
}

function documentScrollTop() {
  const doc = document.documentElement;
  return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
}

const el_nav1 = document.getElementById("nav");
const el_nav2 = el_nav1.cloneNode(true);
el_nav1.parentNode.insertBefore(el_nav2, el_nav1);
el_nav2.style.cssText = `position:fixed; transform:translateY(-100%);`;

function animateNavigation() {
  const canShow = documentScrollTop() >= 150;
  el_nav2.style.transform = `translateY(${canShow?0:-100}%)`;
  el_nav1.style.cssText = `position:${canShow?'sticky':'relative'}; visibility:${canShow?'hidden':'visible'};`
}

window.addEventListener('scroll', debounce(animateNavigation, 99));
document.addEventListener('DOMContentLoaded', animateNavigation);
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
p {height:300vh;border:4px dashed #000;} /* force scrollbars */

#nav {
  position: relative;
  top: 0;
  width: 100%;
  padding: 20px;
  background: gold;
  transition: transform 0.6s;
}
<nav id="nav">NAVIGATION HERE</nav>
<p></p>

Комната для улучшения

  • Попробуйте использовать только один элемент (прокрутить наверх здесь сложно ...)
  • Используйте дополнительное условие внутри функции animateNavigation, которая проверяет, было ли уже выполнено действие (для предотвращения дополнительных вызовов на style, пока canShow не переключится на новое логическое значение)
...