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

Я хочу, чтобы при прокрутке вверх заголовок моей страницы также поднимался, но после 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

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

— 20.01.2019 20:36

@thanveer Спасибо за попытку

— 20.01.2019 20:47

я исправил это

— 20.01.2019 20:51

@ThanveerShah я кое-что исправил, а также изменил сторону панели вывода, тогда я буду работать. но пока не работает анимация скольжения вниз

— 20.01.2019 20:58

Ориентация на класс при прокрутке — это плохо. Убийца производительности. Кэшируйте свои селекторы, используйте дроссель для обратного вызова прокрутки.

— 20.01.2019 21:06

@RokoC.Buljan спасибо за предложение. Можете ли вы поделиться с тем, как это лучше всего сделать. пожалуйста

— 20.01.2019 21:19

Я не знаю, что вы подразумеваете под "but after scroll position 150 it will slide down smoothly and fixed on top" — это может означать что угодно. Особенно, когда в вашем коде вы используете 100 в качестве некоторого эталонного значения...

— 20.01.2019 21:23

@RokoC.Buljan, пожалуйста, проверьте мой справочный URL, тогда вы сможете легко понять. когда вы будете прокручивать вниз. заголовок/меню скользит сверху вниз и закрепляется сверху. что я хочу сделать

— 20.01.2019 21:25

Поэтому тоже непонятно первый "when I scroll up my page header will go up" вверх? где?

— 20.01.2019 21:25

Итак, вы хотите точно такое же поведение, как в демо, но без глюков? Или что-то другое?

— 20.01.2019 21:26

Давайте продолжить обсуждение в чате.

— 20.01.2019 21:27

jquery css sticky

20.01.2019 19:55

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

499

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

Ответы 1

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

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

создает глубокий клон элемента навигации (другие решения глючили после большого количества тестов)
использует 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 не переключится на новое логическое значение)

большое спасибо за помощь. вы проводите много времени. еще раз спасибо

— 21.01.2019 02:12

21.01.2019 02:00