Исправлено положение при мерцании прокрутки

Question

У меня есть простая страница с header и nav. При прокрутке окна я установил header и nav в положение fixed. Все идет хорошо, если страница достаточно длинна для прокрутки. Если страница находится на определенной высоте, я получаю мерцающую ситуацию.

var prev = 0;
var $window = $(window);
var nav = $('.context-nav');
var $navbar = $('.navbar');

$(window).scroll(function(e) {
  var scrollTop = $window.scrollTop();
  nav.toggleClass('fixed', scrollTop >= prev);
  $navbar.toggleClass('fixed', scrollTop >= prev);
  prev = scrollTop;
});

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-decoration: none;
}

html,
body {
  font-size: 1rem;
  background-image: linear-gradient(to right, #8ca986, #789a71);
}

.sp {
  height: 700px;
}

header {
  position: relative;
  background: #fff;
  height: 80px;
  text-align: center;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04);
  transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
}

.page-container {
  padding: 2rem;
  position: relative;
  color: white;
}

.page-container .context-nav {
  display: flex;
  flex-direction: row;
  color: white;
  position: relative;
  margin-bottom: 3rem;
  padding: 1rem;
  transition: all 0.4s ease;
}

.page-container .context-nav.fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 60px;
  background-color: rgba(255, 255, 255, 0.08);
}

.page-container .context-nav .nav-item {
  padding: 20px;
  border: 1px solid white;
  margin-right: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="navbar">
  My header goes here
</header>
<div class="page-container">
  <div class="context-nav">
    <div class="nav-item">Item 1</div>
    <div class="nav-item">Item 2</div>
    <div class="nav-item">Item 3</div>
  </div>
  <h1 class="sp">Scroll me... </h1>
</div>

Вы можете увидеть проблему, если вы отрегулируете высоту класса .sp до небольшого размера. В моем примере я установил 700px. Когда я пытаюсь прокрутить, он устанавливает класс, но удаляет его напрямую, что вызывает мерцание. Когда я устанавливаю .sp высоту класса на 1200px, проблема не возникает.

У кого-нибудь есть идея, чтобы это исправить?

Codepen

Answer 1

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

Вот кодекс, который я быстро раздвоил, чтобы показать, что я имею в виду:

var $window = $(window);
var $stickyHeader = $('.stickyHeader');
var $nav = $('.context-nav');
var navOffset = $nav.offset().top;
var $navbar = $('.navbar');
var $newNavBar = $navbar.clone();
var $newNav = $nav.clone();

$stickyHeader.append($newNavBar);
$stickyHeader.append($newNav);
var timer;

$(window).scroll(function (e) {
	if(timer) {
		window.clearTimeout(timer);
	}

	timer = window.setTimeout(function(){
		if($window.scrollTop() > navOffset) {
			$stickyHeader.addClass('active');
		}
		else {	
			$stickyHeader.removeClass('active');
		}
	}, 100);
});

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-decoration: none;
}

html,
body {
  font-size: 1rem;
  background-image: linear-gradient(to right, #8ca986, #789a71);
}

.sp {
  height: 700px;
}

header {
  position: relative;
  background: #fff;
  height: 80px;
  text-align: center;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04);
}
.active header {
  width: 100%;
  height: 60px;
}

.page-container {
  padding: 2rem;
  position: relative;
  color: white;
}

.context-nav {
  display: flex;
  flex-direction: row;
  color: white;
  position: relative;
  margin-bottom: 3rem;
  padding: 1rem;
}
.active .context-nav {
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.08);
}
.context-nav .nav-item {
  padding: 20px;
  border: 1px solid white;
  margin-right: 1rem;
}

.stickyHeader {
  width: 100%;
  position: fixed;
  height: 0;
  overflow: hidden;
  top: -140px;
  transition: height 200ms ease, top 200ms ease;
}
.stickyHeader.active {
  height: 140px;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stickyHeader">
	
</div>
<header class="navbar">
	My header goes here
</header>
<div class="page-container">	
	<div class="context-nav">
		<div class="nav-item">Item 1</div>
		<div class="nav-item">Item 2</div>
		<div class="nav-item">Item 3</div>
	</div>
	<h1 class="sp">Scroll me... </h1>
</div>

https://codepen.io/j-lastforone/pen/bzddmK