Вот набросок примера с вашим кодом — https://jsfiddle.net/6vnjuyf3/
|
scroll синхронизация блоков
Сергей Ракипов,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
}
.sidebar{
width: 280px;
height: 100vh;
position: fixed;
top:0;
left: 0;
overflow-y: scroll;
overflow-x: hidden;
direction: rtl;
}
.zagalovok_nav{
margin: 10px 10px 10px 10px;
padding: 20px 20px 20px 20px;
direction: ltr;
}
.zagalovok_nav > h3{
color:cornflowerblue;
}
.zagalovok_nav > p{
color: gray;
}
.zagalovok_nav_select {
background-color: #e2e2e2;
color: #fff;
}
.sidebar::-webkit-scrollbar{
width: 10px;
}
.sidebar::-webkit-scrollbar-track{
border: 1px solid black;
background-color: #F5F5F5;
}
.sidebar::-webkit-scrollbar{
width: 10px;
background-color: #F5F5F5;
}
.sidebar::-webkit-scrollbar-thumb{
background-color: cornflowerblue;
}
.soderzjaniya{
max-width: 960px;
margin: 0px 0px 0px 340px;
}
.soderzjaniya_statiya{
margin: 40px 20px 40px 20px;
}
.soderzjaniya_statiya > h3{
color: #3E62A5;
}
.soderzjaniya_statiya > p{
}
</style>
</head>
<body>
<div class="sidebar">
<div class="zagalovok_nav">
<h3>1.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>1.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>1.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>2.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>2.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>2.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>3.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>3.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>3.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>4.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>4.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>4.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>5.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>5.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>5.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>6.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>6.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
</div>
<div class="zagalovok_nav">
<h3>6.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet,</p>
</div>
<div class="zagalovok_nav">
<h3>7.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="zagalovok_nav">
<h3>7.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet,</p>
</div>
<div class="zagalovok_nav">
<h3>7.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="zagalovok_nav">
<h3>8.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="zagalovok_nav">
<h3>8.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="zagalovok_nav">
<h3>8.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="zagalovok_nav">
<h3>9.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="zagalovok_nav">
<h3>9.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="zagalovok_nav">
<h3>9.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
<div class="soderzjaniya">
<div class="soderzjaniya_statiya">
<h3>1.1 Заголовок</h3>
<p>Lorem ipsum dolor </p>
</div>
<div class="soderzjaniya_statiya">
<h3>1.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="soderzjaniya_statiya">
<h3>1.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="soderzjaniya_statiya">
<h3>2.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, .</p>
</div>
<div class="soderzjaniya_statiya">
<h3>2.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet,</p>
</div>
<div class="soderzjaniya_statiya">
<h3>2.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, similique </p>
</div>
<div class="soderzjaniya_statiya">
<h3>3.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="soderzjaniya_statiya">
<h3>3.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="soderzjaniya_statiya">
<h3>3.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div class="soderzjaniya_statiya">
<h3>4.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="soderzjaniya_statiya">
<h3>4.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="soderzjaniya_statiya">
<h3>4.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="soderzjaniya_statiya">
<h3>5.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="soderzjaniya_statiya">
<h3>5.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="soderzjaniya_statiya">
<h3>5.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="soderzjaniya_statiya">
<h3>6.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="soderzjaniya_statiya">
<h3>6.2 Заголовок</h3>
<p>Lorem ipsum dolor sit </p>
</div>
<div class="soderzjaniya_statiya">
<h3>6.3 Заголовок</h3>
<p>Lorem ipsum dolor sit</p>
</div>
<div class="soderzjaniya_statiya">
<h3>7.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="soderzjaniya_statiya">
<h3>7.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="soderzjaniya_statiya">
<h3>7.3 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quas recusandae ad </p>
</div>
<div class="soderzjaniya_statiya">
<h3>8.1 Заголовок</h3>
<p>Lorem ipsum dolor sit amet, </p>
</div>
<div class="soderzjaniya_statiya">
<h3>8.2 Заголовок</h3>
<p>Lorem ipsum dolor sit amet,</p>
</div>
<div class="soderzjaniya_statiya">
<h3>8.3 Заголовок</h3>
<p>Lorem ipsum dolor sit </p>
</div>
<div class="soderzjaniya_statiya">
<h3>9.1 Заголовок</h3>
<p>Lorem ipsum dolor </p>
</div>
<div class="soderzjaniya_statiya">
<h3>9.2 Заголовок</h3>
<p>Lorem ipsum dolor </p>
</div>
<div class="soderzjaniya_statiya">
<h3>9.3 Заголовок</h3>
<p>Lorem ipsum dolor .</p>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const [block, {children}] = document.querySelectorAll(".sidebar, .soderzjaniya");
const formatTop = elem => Math.abs(elem.getBoundingClientRect().top)
const findIndexTop = ({children}) => {
let index = 0, min = formatTop(children[index]);
[...children].forEach((elem, i) => {
let up = formatTop(elem);
if (up < min) {
min = up;
index = i
}
});
return index
};
block.addEventListener("scroll", () => {
let index = findIndexTop(block);
children[index].scrollIntoView({
block: "start",
behavior: "smooth"
});
})
});
</script>
</body>
</html>
|
Цитата:
|
рони,
Спасибо, буду разобраться |
Malleys,
Спасибо, я как понял что бы сокращать нужно создавать массивы. |
Ну вот как, все все верно, а ошибку не вижу
const navigatsia_obertka = document.querySelector(".navigatsia_obertka");
const nav_logo = document.querySelector(".nav_logo");
nav_tsvet = () => {
nav_test = navigatsia_obertka.getBoundingClientRect();
if(nav_test.top = 0){
navigatsia_obertka.style.backgroundColor = "#ED1C24"
};
console.log(nav_test.top)
}
window.addEventListener("scroll", nav_tsvet);
должен изменится фон, но не меняется |
Сергей Ракипов,
ошибка прежняя ==!!! |
if(nav_test.top = 0){
Наверно надо сравнивать, а не присваивать. И сравнивать на точное равенство с 0 не самое лучшее. может перескочить. Лучше if(nav_test.top <= 0 ) Или диапазон какой то по смыслу |
рони,
Да я просто не заметил, я не зубок знаю операнды, просто не понимаю почему иногда не вижу ошибки voraa, Спасибо ! |
Я вот до сих пор не понимаю логику.
Я говорю ему выбрать все элементы и присвоить класс, но он не находит все. const nav_a = document.querySelectorAll(".nav>a"); <div class="nav"><a href="#">Наши проекты</a></div> <div class="nav"><a href="#">Люди о нас</a></div> <div class="nav"><a href="#">Наша жизнь</a></div> <div class="nav"><a href="#">Контакты</a></div>
const navigatsia_obertka = document.querySelector(".navigatsia_obertka");
const nav_logo_1 = document.querySelector(".nav_logo_1");
const nav_a = document.querySelectorAll(".nav>a");
nav_tsvet = () => {
nav_test = navigatsia_obertka.getBoundingClientRect();
if (nav_test.top >= 300) {
navigatsia_obertka.style.backgroundColor = "#fff"
nav_logo_1.classList.add("nav_logo_1");
nav_logo_1.classList.remove("nav_logo_2");
nav_a.classList.remove("nav_a");
} else if (nav_test.top <= 0) {
navigatsia_obertka.style.backgroundColor = "#ED1C24"
nav_logo_1.classList.remove("nav_logo_1");
nav_logo_1.classList.add("nav_logo_2");
nav_a.classList.add("nav_a");
}
}
window.addEventListener("scroll", nav_tsvet);
|
| Часовой пояс GMT +3, время: 06:31. |