Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Все делаю логично, но не работает. (https://javascript.ru/forum/misc/80328-vse-delayu-logichno-no-ne-rabotaet.html)

Сергей Ракипов 23.05.2020 13:50
Все делаю логично, но не работает.
 
Задача нужно отслеживать элемент а точнее его положение по отношению краю окна браузера.
Если он достигает самого верха нужно добавить класс, если не достиг то класс удаляется.

Что я делаю я нахожу элемент и добавляю ему
const soderzjaniyaStatiya1_3 = document.querySelector(".soderzjaniya_statiya:nth-child(3)").getBoundingClientRect();
В функции я пишу если если параметр 0 или меньше
if(soderzjaniyaStatiya1_3.top <= 0)
то выполни следующее действие, вот этому элементу добавь класс
zagalovokNav1_3.classList.add("zagalovok_nav_selec t");
И вешаю то что бы отслеживать класс
window.addEventListener("scroll", kraiOkna);

const zagalovokNav1_3 = document.querySelector(".zagalovok_nav:nth-child(3)");
const soderzjaniyaStatiya1_3 = document.querySelector(".soderzjaniya_statiya:nth-child(3)").getBoundingClientRect();
function kraiOkna(){
    if(soderzjaniyaStatiya1_3.top <= 0)
        {
            zagalovokNav1_3.classList.add("zagalovok_nav_select");
        }
}
window.addEventListener("scroll", kraiOkna);


Вот все логично но не работает так как нужно, то есть работает, но что бы сработало нужно обновить, то есть он так сказать в реальном времени не работает.

рони 23.05.2020 14:00
Цитата:
Сообщение от Сергей Ракипов
Все делаю логично, но не работает.
предположим вы измерили свой рост в 5 лет, поставили метку, а потом в возрасте 15 лет, удивились что метка не стала выше, а осталась на прежнем месте?!
где то у вас подобное было ... перенесите строку 2 в начало функции.

Сергей Ракипов 23.05.2020 14:10
Цитата:
Сообщение от рони (Сообщение 524759)
предположим вы измерили свой рост в 5 лет, поставили метку, а потом в возрасте 15 лет, удивились что метка не стала выше, а осталась на прежнем месте?!
где то у вас подобное было ... перенесите строку 2 в начало функции.
Спасибо все сработало.


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

Malleys 23.05.2020 14:35
Сергей Ракипов, наверняка задача может быть решена намного проще (например при помощи position: sticky; top: 0;)

Сергей Ракипов 23.05.2020 14:44
Цитата:
Сообщение от Malleys (Сообщение 524761)
Сергей Ракипов, наверняка задача может быть решена намного проще (например при помощи position: sticky; top: 0;)
нет не получится
там два разных блока, в одном содержание, в другом заголовки этого содержания.
ну или я по крайне мере не вижу этого, хотя css знаю луче чем JS

Но последнее ваше решение меня удивило.

Сергей Ракипов 23.05.2020 14:49
У меня вот что получается 

function kraiOkna(){
    let soderzjaniyaStatiya1_3 = document.querySelector(".soderzjaniya_statiya:nth-child(3)").getBoundingClientRect();
    if(soderzjaniyaStatiya1_3.top <= 0)
        {
            zagalovokNav1_3.classList.add("zagalovok_nav_select");
        }
    else if(soderzjaniyaStatiya1_3.top >= 0)
        {
            zagalovokNav1_3.classList.remove("zagalovok_nav_select");
        }
}
window.addEventListener("scroll", kraiOkna);


Но не то что бы проблема ну у меня таких может быть с десяток а быть может и больше

const zagalovokNav1_1 = document.querySelector(".zagalovok_nav:nth-child(1)");
const zagalovokNav1_2 = document.querySelector(".zagalovok_nav:nth-child(2)");
const zagalovokNav1_3 = document.querySelector(".zagalovok_nav:nth-child(3)");
const zagalovokNav2_1 = document.querySelector(".zagalovok_nav:nth-child(4)");
const zagalovokNav2_2 = document.querySelector(".zagalovok_nav:nth-child(5)");
const zagalovokNav2_3 = document.querySelector(".zagalovok_nav:nth-child(6)");
const zagalovokNav3_1 = document.querySelector(".zagalovok_nav:nth-child(7)");
const zagalovokNav3_2 = document.querySelector(".zagalovok_nav:nth-child(8)");
const zagalovokNav3_3 = document.querySelector(".zagalovok_nav:nth-child(9)");

const soderzjaniyaStatiya1_1 = document.querySelector(".soderzjaniya_statiya:nth-child(1)");
const soderzjaniyaStatiya1_2 = document.querySelector(".soderzjaniya_statiya:nth-child(2)");
const soderzjaniyaStatiya1_3 = document.querySelector(".soderzjaniya_statiya:nth-child(3)")
const soderzjaniyaStatiya2_1 = document.querySelector(".soderzjaniya_statiya:nth-child(4)");
const soderzjaniyaStatiya2_2 = document.querySelector(".soderzjaniya_statiya:nth-child(5)");
const soderzjaniyaStatiya2_3 = document.querySelector(".soderzjaniya_statiya:nth-child(6)");
const soderzjaniyaStatiya3_1 = document.querySelector(".soderzjaniya_statiya:nth-child(7)");
const soderzjaniyaStatiya3_2 = document.querySelector(".soderzjaniya_statiya:nth-child(8)");
const soderzjaniyaStatiya3_3 = document.querySelector(".soderzjaniya_statiya:nth-child(9)");


И получается что для каждого писать свою функцию это очень объемно, можно ли как то сократить

Malleys 23.05.2020 14:52
Цитата:
Сообщение от Сергей Ракипов
там два разных блока, в одном содержание, в другом заголовки этого содержания.
Покажите разметку.

Сергей Ракипов 23.05.2020 15:11 
<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, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>7.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>7.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>7.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>8.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>8.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>8.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>9.1 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>9.2 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</p>
	</div>
	<div class="zagalovok_nav">
		<h3>9.3 Заголовок</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, consequatur.</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>


И нужно понимать что где блоки с текстом статей я убрал большое количество символов, что бы соответствовать допустимому количеству символов для размещение поста.

С левого боку содержание, а с правого основные статьи

Сергей Ракипов 23.05.2020 15:44
И тоже самое как сократить вот это 

function statia1_3() {
	soderzjaniyaStatiya1_3.scrollIntoView({block: "start", behavior: "smooth"});
}
zagalovokNav1_3.addEventListener("click", statia1_3);


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

Malleys 23.05.2020 16:32
Цитата:
Сообщение от Сергей Ракипов
мне кажется что каждый раз делать функцию это перебор у меня таких может быть не один десяток
Вы можете использовать для вашей цели Intersection Observer API

Malleys 23.05.2020 16:52
Вот набросок примера с вашим кодом — https://jsfiddle.net/6vnjuyf3/

рони 23.05.2020 17:08
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>

Сергей Ракипов 23.05.2020 18:03
Цитата:
Сообщение от Malleys (Сообщение 524782)
Вы можете использовать для вашей цели Intersection Observer API
Поизучаю, спасибо

Сергей Ракипов 23.05.2020 18:26
рони,
Спасибо, буду разобраться

Сергей Ракипов 23.05.2020 18:27
Malleys,
Спасибо, я как понял что бы сокращать нужно создавать массивы.

Сергей Ракипов 30.06.2020 16:41
Ну вот как, все все верно, а ошибку не вижу 

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);


должен изменится фон, но не меняется

рони 30.06.2020 18:44
Сергей Ракипов,
ошибка прежняя ==!!!

voraa 30.06.2020 19:42
if(nav_test.top = 0){
Наверно надо сравнивать, а не присваивать.
И сравнивать на точное равенство с 0 не самое лучшее. может перескочить.
Лучше
if(nav_test.top <= 0 )
Или диапазон какой то по смыслу

Сергей Ракипов 01.07.2020 06:11
рони,
Да я просто не заметил, я не зубок знаю операнды, просто не понимаю почему иногда не вижу ошибки

voraa,
Спасибо !

Сергей Ракипов 01.07.2020 07:30
Я вот до сих пор не понимаю логику.

Я говорю ему выбрать все элементы и присвоить класс, но он не находит все.

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);

Сергей Ракипов 01.07.2020 07:50
Еще сделал так 

const navigatsia_obertka = document.querySelector(".navigatsia_obertka");
const nav_logo_1 = document.querySelector(".nav_logo_1");
const nav_a = document.querySelectorAll(".nav_a");

let = nav_tsvet_1 = () => {
    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");
        let = nav_test_2 = () => {
            for(let i = 0; nav_a.length; i++){
                nav_a[i].style.color = "#ED1C24";
            }
        }
        nav_test_2();
    } 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");
        let = nav_test_2_1 = () => {
            for(let i = 0; nav_a.length; i++){
                nav_a[i].style.color = "#fff";
            }
        }
        nav_test_2_1();
    }
   
}
window.addEventListener("scroll", nav_tsvet_1);




.nav_a{
	color:#ED1C24
}



<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>


И вроде бы работает, но возникают ошибки

voraa 01.07.2020 09:58
Цитата:
Сообщение от Сергей Ракипов
И вроде бы работает, но возникают ошибки
И какие ошибки?
Если вы видите их в консоле, так исправляйте.
Что за строки 11 и 21?

Строки 11-16 можно просто записать

nav_a.forEach(ea => ea.style.color = "#ED1C24");

строки 21-26 аналогично

Сергей Ракипов 01.07.2020 10:20
voraa,
все сработало
а что такое
ea
это параметр?

рони 01.07.2020 10:28
Цитата:
Сообщение от Сергей Ракипов
а что такое
ea
это элемент массива, название может быть любое, смотрите документацию на forEach

voraa 01.07.2020 10:29
Цитата:
Сообщение от Сергей Ракипов
а что такое
ea
это параметр?
Да. параметр.
см функцию forEach
https://developer.mozilla.org/ru/doc.../Array/forEach

Сергей Ракипов 01.07.2020 10:42
рони,
voraa,

Спасибо, за помощь.
Правда очень признателен.

Сергей Ракипов 03.07.2020 15:18
Скажите правильно ли поинмаю

nav_test_1.top <= 0 && nav_test_2 <= 960

если два условия совпадают то выполнится действия. 
let = nav_tsvet_2 = () => {
    nav_test_1 = navigatsia_obertka.getBoundingClientRect();
    nav_test_2 = navigatsia_obertka.offsetWidth;
    if (nav_test_1.top >= 0 && nav_test_2 >= 960) {
        nav_a.forEach(ea => ea.style.color = "#ED1C24");
    }
    else if(nav_test_1.top <= 0 && nav_test_2 <= 960){
        nav_a.forEach(ea => ea.style.color = "#fff");
    }
    console.log(nav_test_2);
}
window.addEventListener("scroll", nav_tsvet_2);

рони 03.07.2020 15:38
Сергей Ракипов,
условие со знаком равно, логично использовать один раз, либо в строке 4 либо в строке 7.

Сергей Ракипов 03.07.2020 18:17
рони,
Я кажется понял, а если
(nav_test_1.top >= 1 && nav_test_2 >= 961)
(nav_test_1.top <= 0 && nav_test_2 <= 960)

я бы проверил но я не возле компа

рони 03.07.2020 18:50
Цитата:
Сообщение от Сергей Ракипов
а если
можно но в реальности равно(=961) будет очень редко(961.4 и т.д.), и часто этим можно пренебречь.

Сергей Ракипов 04.07.2020 12:06
рони,
Вроде разобрался, спасибо


Часовой пояс GMT +3, время: 10:23.