23.05.2020, 13:50
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
|
Все делаю логично, но не работает.
Задача нужно отслеживать элемент а точнее его положение по отношению краю окна браузера.
Если он достигает самого верха нужно добавить класс, если не достиг то класс удаляется.
Что я делаю я нахожу элемент и добавляю ему
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
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,150
|
|
|
Сообщение от Сергей Ракипов
|
|
Все делаю логично, но не работает.
|
предположим вы измерили свой рост в 5 лет, поставили метку, а потом в возрасте 15 лет, удивились что метка не стала выше, а осталась на прежнем месте?!
где то у вас подобное было ... перенесите строку 2 в начало функции. |
|
23.05.2020, 14:10
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
Сообщение от рони
|
предположим вы измерили свой рост в 5 лет, поставили метку, а потом в возрасте 15 лет, удивились что метка не стала выше, а осталась на прежнем месте?!
где то у вас подобное было ... перенесите строку 2 в начало функции.
|
Спасибо все сработало.
Я просто ни как не могу запомнить эту логику, и да такое уже было. Что нужно понимать если я получил значение в не функции то он не измененное. |
|
23.05.2020, 14:35
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сергей Ракипов, наверняка задача может быть решена намного проще (например при помощи position: sticky; top: 0;)
|
|
23.05.2020, 14:44
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
|
Сообщение от Malleys
|
|
Сергей Ракипов, наверняка задача может быть решена намного проще (например при помощи position: sticky; top: 0;)
|
нет не получится
там два разных блока, в одном содержание, в другом заголовки этого содержания.
ну или я по крайне мере не вижу этого, хотя css знаю луче чем JS
Но последнее ваше решение меня удивило. |
|
23.05.2020, 14:49
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
У меня вот что получается
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)");
И получается что для каждого писать свою функцию это очень объемно, можно ли как то сократить
|
|
23.05.2020, 14:52
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Сергей Ракипов
|
|
там два разных блока, в одном содержание, в другом заголовки этого содержания.
|
Покажите разметку. |
|
23.05.2020, 15:11
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
<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:13.
|
|
23.05.2020, 15:44
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 673
|
|
И тоже самое как сократить вот это
function statia1_3() {
soderzjaniyaStatiya1_3.scrollIntoView({block: "start", behavior: "smooth"});
}
zagalovokNav1_3.addEventListener("click", statia1_3);
мне кажется что каждый раз делать функцию это перебор у меня таких может быть не один десяток |
|
23.05.2020, 16:32
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Сергей Ракипов
|
|
мне кажется что каждый раз делать функцию это перебор у меня таких может быть не один десяток
|
Вы можете использовать для вашей цели Intersection Observer API |
|
|
|
