Липкая позиция навигации меняет фон в позиции прокрутки - PullRequest
Новая
       68

Липкая позиция навигации меняет фон в позиции прокрутки

1 голос
/ 28 апреля 2020

Я хочу, чтобы <nav> был зафиксирован тремя цифрами. Когда он достигает зеленого квадрата, он должен go НАД числами и оставаться фиксированным и становиться красным. И когда вы go вернетесь наверх, он должен go вернуться в исходное положение и go вернуться к зеленому. Как бы я этого достиг? 

.container {
  height: 1000px;
}

nav{
  display: flex;
  justify-content: space-around;
}

.square{
  background-color: green;
  width: 100px;
  height: 100px;
  margin: auto;
  display: block;
  position: sticky;
}
<div class="container">
  <header>
    <nav>
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </nav>
  </header>
  <div class="square"></div>
</div>

Ответы [ 2 ]

0 голосов
/ 28 апреля 2020

вы можете использовать javascript для обнаружения прокрутки и использовать window.onscroll , чтобы добавить класс закрепления к вашему элементу, также обратите внимание, что при использовании sticky CSS значение атрибута для отображения вы также должны настроить местоположение, я использовал cal c для вычисления левого значения, вот рабочий фрагмент: 

window.onscroll = function() {myFunction()};

var header = document.querySelector(".square");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
.container {
  height: 10000px;
}

nav {
  display: flex;
  justify-content: space-around;
}

.square {
  background-color: green;
  width: 100px;
  height: 100px;
  margin: auto;
  display: block;
}

.sticky {
  position: fixed;
  top: 0;
  background-color:red;
  left: calc((100% - 100px)/2);
}

.sticky + .content {
  padding-top: 102px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="container">
  <header>
    <nav>
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </nav>
  </header>


  <div class="square"></div>

</div>
</body>
</html>
0 голосов
/ 28 апреля 2020

Для изменения цвета фона вы должны смотреть анимация , но, в соответствии с позиционированием, вам нужно добавить что-то вроде top: 0, чтобы указать, в каком положении ваш компонент будет липкий .

...