Как правильно определить видимость элемента относительно его контйнера?
Здравствуйте. Подскажите, пожалуйста, как решить следующую задачу. Мне необходимо определить в следующем примере видимость секции при внутреннем скролле вниз и вверх, а точнее мне необходимо возвращать саму ноду, или выполнять какую-либо другую функцию, когда она попадет в зону видимости. Речь именно о внутреннем скролле.
https://codepen.io/s24344/pen/QzvVdY |
s24344,
checkDistance (elem){
let posElem = elem.getBoundingClientRect();
if(posElem.top > 0 && posElem.top < window.innerHeight ) elem.classList.add("act");
else elem.classList.remove("act");
}
|
Спасибо. Подскажите пожалуйста, я верно понял, чтобы мне получить первый видимый элемент, я должен фильтровать по всем текущим элементам с class act, и получать первый?
|
s24344,
выше видимые относительно окна, ниже относительно контейнера.
class Section {
constructor(element) {
this.element = element;
this.weatherPanel = this.element.querySelector('[data-section-ref="weather-panel"]');
this.groups = this.element.querySelector('[data-section-ref="groups"]');
this.groupsSection = [...this.element.querySelectorAll('[data-section-ref="groups-section"]')];
this.init();
}
init() {
this.groups.addEventListener('scroll', this.move.bind(this));
}
checkDistance(elem){
let posParent = this.groups.getBoundingClientRect();
let posElem = elem.getBoundingClientRect();
if(posElem.top >= posParent.top && posElem.top < posParent.bottom ) elem.classList.add("act");
else elem.classList.remove("act");
}
move(event) {
this.groupsSection.forEach(this.checkDistance.bind(this));
console.log(this.element.querySelector('.act')) //первый видимый
}
}
const section = new Section(document.querySelector('[data-component="section"]'));
|
Большой спасибо за помощь. Вы мне уже помогли. Но Вы могли бы подсказать ответ ещё на один вопрос. Как мне верно дописать условие, чтобы я получал первый видимый элемент только в тот момент кода предыдущий элемент полностью исчезнет (панель с 'data' накроет нужную мне ноду)?
|
s24344,
не понимаю. |
s24344,
возможный вариант...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.section__container {
max-width: 1366px;
margin: 0 auto;
display: flex;
}
.section__col-1 {
width: 60%;
}
.section__col-2 {
width: 40%;
}
.section__reverse-order {
display: flex;
justify-content: flex-end;
background-color: #61bfad;
padding: 20px;
border-bottom: 1px solid #167c80;
}
.section__reverse-order-btn {
min-width: 184px;
border: 1px solid #52526c;
background-color: transparent;
color: #ffffff;
border-radius: 100px;
cursor: pointer;
padding: 8px;
}
.section__weather-panel {
background-color: #61bfad;
padding: 20px;
color: #ffffff;
}
.section__groups {
max-height: 1200px;
overflow-y: auto;
}
.section__groups-section {
min-height: 200px;
transition: 1s .6s;
}
.section__groups-section:nth-child(odd) {
background-color: #eeeeee;
}
.section__groups-section:nth-child(even) {
background-color: #e0e0e0;
}
.section__col-2 {
background-color: #167c80;
}
.section__groups-section.red{
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="app">
<div class="app__inner">
<main class="main">
<section class="section" data-component="section">
<div class="section__container">
<div class="section__col-1">
<div class="section__reverse-order"></div>
<div class="section__weather-panel" data-section-ref="weather-panel">
<div class="section__weather-panel-data">
data
</div>
</div>
<div class="section__groups" data-section-ref="groups">
<div class="section__groups-section" data-section-ref="groups-section">
<div class="section__groups-data">
07.15
</div>
</div>
<div class="section__groups-section" data-section-ref="groups-section">
<div class="section__groups-data">
07.30
</div>
</div>
<div class="section__groups-section" data-section-ref="groups-section">
<div class="section__groups-data">
07.45
</div>
</div>
<div class="section__groups-section" data-section-ref="groups-section">
<div class="section__groups-data">
08.00
</div>
</div>
<div class="section__groups-section" data-section-ref="groups-section">
<div class="section__groups-data">
08.15
</div>
</div>
<div class="section__groups-section" data-section-ref="groups-section">
<div class="section__groups-data">
08.30
</div>
</div>
<div class="section__groups-section" data-section-ref="groups-section">
<div class="section__groups-data">
08.45
</div>
</div>
<div class="section__groups-section" data-section-ref="groups-section">
<div class="section__groups-data">
09.00
</div>
</div>
<div class="section__groups-section" data-section-ref="groups-section">
<div class="section__groups-data">
09.15
</div>
</div>
<div class="section__groups-section" data-section-ref="groups-section">
<div class="section__groups-data">
09.30
</div>
</div>
<div class="section__groups-section" data-section-ref="groups-section">
<div class="section__groups-data">
09.45
</div>
</div>
<div class="section__groups-section" data-section-ref="groups-section">
<div class="section__groups-data">
10.00
</div>
</div>
</div>
</div>
<div class="section__col-2">
<div class="section__table">
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
footer
</footer>
</div>
</div>
<script>
class Section {
constructor(element) {
this.element = element;
this.weatherPanel = this.element.querySelector('[data-section-ref="weather-panel"]');
this.groups = this.element.querySelector('[data-section-ref="groups"]');
this.groupsSection = [...this.element.querySelectorAll('[data-section-ref="groups-section"]')];
this.init();
this.temp = this.groupsSection[0]
}
init() {
this.groups.addEventListener('scroll', this.move.bind(this));
}
checkDistance(elem){
let posParent = this.groups.getBoundingClientRect();
let posElem = elem.getBoundingClientRect();
if(posElem.top + posElem.height >= posParent.top && posElem.top < posParent.bottom ) elem.classList.add("act");
else elem.classList.remove("act");
}
move(event) {
this.groupsSection.forEach(this.checkDistance.bind(this));
let first = this.element.querySelector('.act') //первый видимый
if (first != this.temp ) {
this.temp.classList.remove("red");
this.temp = first;
this.temp.classList.add("red");
}
}
}
const section = new Section(document.querySelector('[data-component="section"]'));
</script>
</body>
</html>
|
Большое спасибо за помощь.
|
| Часовой пояс GMT +3, время: 08:06. |