Липкая позиция, не "толкающая" другие липкие элементы - PullRequest
Новая
       7

Липкая позиция, не "толкающая" другие липкие элементы

0 голосов
/ 01 июля 2018

Мне кажется, что здесь есть очевидный ответ, но я не могу понять, почему - в приведенном ниже примере макета - #one не «подталкивается» на #three?

Глядя на последний пример, приведенный в MDN , видно, что липкие элементы выталкивают друг друга из окна, тогда как здесь #one & #three, похоже, просто скользят друг по другу. Я чувствую, что это как-то связано с высотами (?), Но любая помощь в объяснении этого была бы признательна! 

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

h1 {
  text-align: center;
  color: #000;
  font: bold 20vw Helvetica, Arial, sans-serif;
}

.sticky {
  position: sticky;
  top: 0px;
}

#start {
  width: 100%;
  height: 50vh;
  background: #fff;
}

#one {
  height: 100vh;
  width: 100%;
  background: url('https://picsum.photos/900/1200/?random');
  background-position: center;
  background-size: cover;
}

#two {
  width: 50%;
  position: relative;
  height: 100vh;
  background: url('https://picsum.photos/800/1200/?random');
  background-position: center;
  background-size: cover;
}

#three {
  width: 100%;
  height: 100vh;
  background: url('https://picsum.photos/700/1200/?random');
  background-position: center;
  background-size: cover;
}
<div id="start">
  <h1>start</h1>
</div>

<div id="one" class="sticky img">
  <h1>one</h1>
</div>

<div id="two" class="img">
  <h1>two</h1>
</div>

<div id="three" class="sticky img">
  <h1>three</h1>
</div>

Ответы [ 2 ]

0 голосов
/ 02 июля 2018

Div #three просто необходимо расположить absolute! 

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

h1 {
  text-align: center;
  color: #000;
  font: bold 20vw Helvetica, Arial, sans-serif;
}

.sticky {
  position: sticky;
  top: 0px;
}

#start {
  width: 100%;
  height: 50vh;
  background: #fff;
}

#one {
  height: 100vh;
  width: 100%;
  background: url('https://picsum.photos/900/1200/?random');
  background-position: center;
  background-size: cover;
}

#two {
  width: 50%;
  position: relative;
  height: 100vh;
  background: url('https://picsum.photos/800/1200/?random');
  background-position: center;
  background-size: cover;
}

#three {
  width: 100%;
  height: 100vh;
  background: url('https://picsum.photos/700/1200/?random');
  background-position: center;
  background-size: cover;
  position:absolute;
}
<div id="start">
  <h1>start</h1>
</div>

<div id="one" class="sticky img">
  <h1>one</h1>
</div>

<div id="two" class="img">
  <h1>two</h1>
</div>

<div id="three" class="img">
  <h1>three</h1>
</div>
0 голосов
/ 01 июля 2018

Вам нужно использовать это position: sticky; внутри любой оболочки. Здесь я немного обновил структуру вашего домена. 

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

h1 {
  text-align: center;
  color: #000;
  font: bold 20vw Helvetica, Arial, sans-serif;
}

.sticky {
  position: sticky;
  top: 0px;
}

#start {
  width: 100%;
  height: 50vh;
  background: #fff;
}

#one {
  height: 100vh;
  width: 100%;
  background: #00f;
}

#two {
  width: 50%;
  position: relative;
  height: 100vh;
  background: #fff;
}

#three {
  width: 100%;
  height: 100vh;
  background: #f00;
<div id="start">
  <h1>start</h1>
</div>

<div id="one">
  <div class="sticky">
    <h1>one</h1>
  </div>  
</div>

<div id="two">
  <h1>two</h1>
</div>

<div id="three">
  <div class="sticky">
    <h1>Three</h1>
  </div>  
</div>

Вы также можете проверить это скрипка

Надеюсь, это поможет вам.

...