2

После загрузки страницы нам предстает главная часть, которая занимает высоту равную 96vh, в то время как navbar, расположенный в самом низу страницы (так нужно, честно), 4vh. Необходимо сделать так, чтобы при прокрутке страницы, когда navbar оказывается в самом верху окна, там он и оставался. Однако при достаточном скролле вверх должен снова зафиксироваться в изначальном положении. Спасибо.

1
  • мм. что насчёт того чтобы js-ом брать верхнюю точку окна, и если navbar будет в этом положении то сделать его fixed 25 апр 2020 в 22:07

2 ответа 2

3

Если я вас правильно понял, то вот решение:

$(function(){
	$navbar = $('.navbar');
	$navbar.css('width', $navbar.outerWidth());
	$window = $(window);
	$h = $navbar.offset().top;
	$window.scroll(function(){
		if ($window.scrollTop() > $h){
			$navbar.addClass('fixed');
		} else {
			$navbar.removeClass('fixed');
		}
	});
});
body {margin: 0; padding: 0;}

section {height: 90vh;}
.navbar {height: 10vh;}

.one { background-color: chocolate; }
.two { background-color: mistyrose; }
.three { background-color: gold; }
.navbar { background-color: red; }

.fixed {position: fixed; top: 0; left: 0; right: 0;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="one"></section>
<div class="navbar">NavBar</div>
<section class="two"></section>
<section class="three"></section>

3

Вот решение на ванильном javascript. navbar-pointer нужен для отслеживания позиции навбара, когда сам навбар закреплен, потому что мы работаем не со скролом а с позицией елемента в области видимости. Главное чтоб navbar был в DOM сразу после navbar-pointer. Или же обернуть navbar в navbar-pointer, как вариант.

const navbarPointer = document.querySelector(".navbar-pointer");
const navbar = document.querySelector(".navbar");

window.addEventListener("scroll", () => {
  const top = navbarPointer.getBoundingClientRect().top;
  if(top <= 0){
    navbar.classList.add("fixed");
  }else{
    navbar.classList.remove("fixed");
  }
});
body {
  margin: 0;
}

.placeholder{
  height: 90vh;
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 10px,
    rgba(0, 0, 0, 0.3) 10px,
    rgba(0, 0, 0, 0.3) 20px
  );
}

.navbar {
  height: 10vh;
  background-color: #ffc000;
  width: 100%;
}

.navbar.fixed{
  position: fixed;
  top: 0;
  left: 0;
}
<div class="placeholder"></div>

<div class="navbar-pointer"></div>
<div class="navbar">Navbar</div>

<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>

1
  • Точно, все ведь просто, спасибо. Но думаю стоит добавить, что navbar лучше задать z-index: 999, потому что может быть перекрыт.
    – Alex
    26 апр 2020 в 10:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.