Прикрепите div к началу при прокрутке и открепите позже - PullRequest
Новая
       6

Прикрепите div к началу при прокрутке и открепите позже

0 голосов
/ 16 октября 2019

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

Есть ли способ сделать это?

пс. Я знаю решение Stickem, но это много, если Javascript, у меня есть ощущение, что это можно сделать гораздо проще. 

window.onscroll = function() {myFunction()};
var header = document.getElementById("center");
var sticky = header.offsetTop-10;
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
#top { height:200px; background:#BFBDC1; }
#center { height:30px; background:#37323E; }
#bottom { height:4000px; background:#6D6A75; }

.sticky { position:fixed; top:0px; width:100%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="top"></div>
<div id="center"></div>
<div id="bottom"></div>

Ответы [ 2 ]

1 голос
/ 16 октября 2019

Простое добавление верхней границы к вашему условию if должно помочь.

Вместо того, чтобы просто проверять, больше ли текущее смещение, чем нижняя граница (sticky в этом случае), также проверить, не меньше ли оно требуемой верхней границы (sticky + 500). 

window.onscroll = function() {myFunction()};
var header = document.getElementById("center");
var sticky = header.offsetTop-10;
function myFunction() {
  if (window.pageYOffset > sticky && window.pageYOffset < sticky + 500) { // <--here
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
#top { height:200px; background:#BFBDC1; }
#center { height:30px; background:#37323E; }
#bottom { height:4000px; background:#6D6A75; }

.sticky { position:fixed; top:0px; width:100%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="top"></div>
<div id="center"></div>
<div id="bottom"></div>
0 голосов
/ 16 октября 2019

Добавьте некоторые дополнительные условия в тестирование вашей функции против window.scrollY

...