Исчезновение контента при прокрутке - PullRequest
Новая
       40

Исчезновение контента при прокрутке

0 голосов
/ 23 июня 2019

Мне нужно, чтобы содержимое страницы исчезло ИЛИ просто исчезло на расстоянии 100 пикселей (произвольно прямо сейчас) от верхней части страницы при ее прокрутке вверх.Любое содержимое страницы более чем в 100 пикселях сверху не должно исчезать, пока оно не пересекает пороговое значение в 100 пикселей.

Я нашел здесь что-то вроде этого, но оно одновременно затухает, и я неНе вижу способа указать порог между видимым и не видимым.Я довольно новичок во всем этом, так что, может быть, я упускаю что-то простое.

Я пробовал разные сценарии, в том числе модификации, но, похоже, не могу его получить.Я собирался попробовать маскировку CSS, но она работает не так, как я хочу.

JAVASCRIPT 

<script language="javascript">
$(document).ready(function(){
$(window).scroll(function(){
$("#hero1").css("opacity", 1 - $(window).scrollTop() / $('#hero1').height());
$("#hero2").css("opacity", 1 - $(window).scrollTop() / $('#hero2').height());
});
});
</script>
#

CSS 

<style type="text/css">

#hero1 {
height:100px;
position:relative;
top:0px;
}

#hero2 {
height:100px;
position:relative;
top:100px;
}

</style>
#

HTML

<div id="hero1">
Here's some text because... why not?
<br />
<img src="this-is-a-picture.jpg" />
</div>

<div id="hero2">
And some more text.
<br />
<img src="this-is-another-picture.png" />
</div>

Вышеприведенное выцветает все, что начинается в тот самый момент, когда начинается прокрутка, а не в указанной точке вниз от верхней части страницы.Например, я хотел бы, чтобы началось постепенное уменьшение, скажем, на 150 пикселей вниз, а постепенное исчезновение - на 100 пикселей вниз.Все, что дальше 150 пикселей от вершины, не будет затронуто.Если это не сработает, даже если контент исчезнет, ​​когда он достигнет 100 пикселей, или что-то еще будет работать.

1 Ответ

0 голосов
/ 24 июня 2019

Проблема в том, что вы не принимаете во внимание, что эти элементы «героя» на самом деле не могут находиться в верхней части страницы.Это означает, что в ваших вычислениях вы должны добавить, как далеко они будут находиться от верхнего края элемента прокрутки.

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

В любом случае, вы можете исправить свой пример, изменив место вычисления непрозрачности с ... 

1 - $(window).scrollTop() / $('#hero2').height();

на ... 

1 - (($(window).scrollTop() - $('#hero2').offset().top) / $('#hero2').height()))

Если бы это был я, я бы вместо этого использовал маску css, чтобы весь контент исчезал на верхнем крае контейнера прокрутки.Как то так ... 

body {
  /* background styles that show through the scrolling elements mask */
}
.scrolling-element-inside-the-body {
  overflow-y: scroll;
  height: 100vh;
  mask: linear-gradient(to bottom, transparent, black 150px, black);
}
...