Липкий заголовок при прокрутке вверх, но компенсирует начальное абсолютное позиционирование - PullRequest
Новая
       44

Липкий заголовок при прокрутке вверх, но компенсирует начальное абсолютное позиционирование

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

У меня проблемы с модификацией этого липкого навигационного кода, чтобы соответствовать немного другим обстоятельствам.Вот источник: Ссылка Codepen

И вот что я сделал до сих пор: Ссылка jsfiddle

Мой отличается тем, что может(или, может быть, не важно) верхняя строка над заголовком, но она не является частью липкого заголовка, поэтому она не будет видна, если вы не прокрутите ее вверх.

Я пытаюсь изменить jQuery, чтобы компенсировать следующее: 1) Заголовок должен закрепиться на позиции ниже панели предупреждений (если она есть), когда прокрутка достигает вершины.2) Заголовок не может быть исправлен изначально, он обычно должен прокручиваться с экрана, как статический заголовок.Это должно только выскользнуть из поля зрения, когда пользователь прокручивает вниз не из самой верхней части страницы.3) Анимации должны быть плавными, не должно быть никаких мерцаний или скачков, когда пользователь прокручивает страницу вверх.

Номер 3 - проблема с моим кодом.Если вы прокрутите вверх близко к вершине, а затем выполните последние 100 пикселей или около того, щелкнув стрелку полосы прокрутки вместо использования колесика мыши, вы увидите, когда он возвращается в абсолютное положение из фиксированного положения, и заголовок внезапно «перепрыгивает» обратно вposition.

Я знаю, что нужно учитывать высоту панели предупреждений, если она есть (чтобы знать, когда начальная прокрутка сверху прошла за пределы высоты панели предупреждений и заголовка), но везде, где япопробуйте добавить его в расчеты, чтобы сделать прыжки хуже или вообще нарушить эффект.

Редактировать: Кроме того, я уверен, что значение дельты там неверно, я не совсем уверен, что делать стот.Я думал, что дельта должна быть высотой панели предупреждений и заголовка вместе, но это не сработало. 

<script>
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 30;
var navbarHeight = $('header').outerHeight();

if($('alertBar').length) {
  var alertHeight = $('alertBar').outerHeight();
} else {
  var alertHeight = 0;
}

$(window).scroll(function(event){
  didScroll = true;
});

setInterval(function() {
  if (didScroll) {
    hasScrolled();
    didScroll = false;
  }
}, 50);

function hasScrolled() {
  var st = $(this).scrollTop();

  // Make sure they scroll more than delta
  if(Math.abs(lastScrollTop - st) <= delta)
  return;

  // If they scrolled down and are past the navbar, add class .nav-up.
  // This is necessary so you never see what is "behind" the navbar.
  if (st > lastScrollTop && st > navbarHeight) {
    // Scroll Down, hide nav
    $('header').removeClass('nav-down').addClass('nav-up');
  } else {
    // Scroll Up, show nav
    if(st + $(window).height() < $(document).height()) {
      $('header').removeClass('nav-up').addClass('nav-down not-top');
      $('body').css({"padding-top": navbarHeight});
    }
    // if scrolled up to the top again
    if(st <= navbarHeight) {
      $('header').removeClass('not-top');
      $('body').css({"padding-top": "0px"})
    }


  }

  lastScrollTop = st;
}

</script>

По сути, я пытаюсь сгладить переход, когда пользователь возвращается ксверху и заголовок возвращается в положение ниже панели предупреждений.У кого-нибудь есть идея?

1 Ответ

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

ОБНОВЛЕНИЕ

https://jsfiddle.net/7mgt5eku/3/

вам нужно будет добавить класс заголовка в заголовок, например ...

<header class = "nav-down navbar">

и добавьте это к css

.nav-down.hidden { transition:all 0.2s; }

Дайте мне знать, что вы думаете.

Вы можете уточнить это с помощью переменных и задержекесли вы чувствуете, что это необходимо, но я думаю, что это даст вам то, что вы ищете ... 

    $(window).scroll(function(event){
  didScroll = true;
  if($(document).scrollTop() < 30 && $('#alertBar').length){
    $('.nav-down').css('top', "2.5rem");
  } else{
    $('.nav-down').css('top', $(document).scrollTop())
  }

});

Извините, пропустил "проверку, когда оповещение пропало", && $ ('# alertBar') .length "должен позаботиться об этом.

...