Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 23.05.2020, 16:52
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Вот набросок примера с вашим кодом — https://jsfiddle.net/6vnjuyf3/
Ответить с цитированием
  #12 (permalink)  
Старый 23.05.2020, 17:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #13 (permalink)  
Старый 23.05.2020, 18:03
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Сообщение от Malleys Посмотреть сообщение
Вы можете использовать для вашей цели Intersection Observer API
Поизучаю, спасибо
Ответить с цитированием
  #14 (permalink)  
Старый 23.05.2020, 18:26
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

рони,
Спасибо, буду разобраться
Ответить с цитированием
  #15 (permalink)  
Старый 23.05.2020, 18:27
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Malleys,
Спасибо, я как понял что бы сокращать нужно создавать массивы.
Ответить с цитированием
  #16 (permalink)  
Старый 30.06.2020, 16:41
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Ну вот как, все все верно, а ошибку не вижу

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


должен изменится фон, но не меняется
Ответить с цитированием
  #17 (permalink)  
Старый 30.06.2020, 18:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сергей Ракипов,
ошибка прежняя ==!!!
Ответить с цитированием
  #18 (permalink)  
Старый 30.06.2020, 19:42
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

if(nav_test.top = 0){
Наверно надо сравнивать, а не присваивать.
И сравнивать на точное равенство с 0 не самое лучшее. может перескочить.
Лучше
if(nav_test.top <= 0 )
Или диапазон какой то по смыслу
Ответить с цитированием
  #19 (permalink)  
Старый 01.07.2020, 06:11
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

рони,
Да я просто не заметил, я не зубок знаю операнды, просто не понимаю почему иногда не вижу ошибки

voraa,
Спасибо !
Ответить с цитированием
  #20 (permalink)  
Старый 01.07.2020, 07:30
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

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

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

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);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт работает через раз Эдди Элементы интерфейса 6 07.06.2014 10:00
Название ячейки таблицы Questioner Общие вопросы Javascript 6 16.02.2011 09:58
ява-скрипт выборочно работает-не работает zeta777 Internet Explorer 0 20.01.2010 11:41
Динамическая HTML форма (FireFox - работает, IE - не работает) dm1tr1y Общие вопросы Javascript 10 11.12.2009 15:59
Помогите! Почему в Opera js-код работает с ошибкой. В IE все нормально. maxonline Events/DOM/Window 4 21.11.2008 12:39