Динамическая смена стилей при скроллинге страницы

@prispewnic · Регистрация: 12.02.2017

Студворк — интернет-сервис помощи студентам

Доброго времени суток, уважаемые знатоки и посетители данного ресурса. Сразу отмечу, что для меня JS, это что-то диковинное и изучать его я начал несколько дней назад, так что сразу извинюсь за банальные вопросы, на которые в тех или иных формах, сотню раз давали ответ. Поиском перед созданием темы я пользовался, но конкретного ответа на свой вопрос не нашел. Есть схожие примеры, но из за отсутствия какого-либо опыта, сделать из них приемлемый для себя вариант я не смог. Чтож, перейдем к сути :

На сайте есть условные две страницы : PAGE-1 и PAGE-2. В начале страниц, есть класс, названный 'panel-sector', который обозначен в скрипте.

HTML5
1
2
3
4
5
<div id="PAGE-1" class="panel-sector">
 
...
 
</div>

HTML5
1
2
3
4
5
<div id="PAGE-2" class="panel-sector">
 
...
 
</div>

При пролиставании страницы до panel-sector'a происходит подмена значений одного из параметров CSS, который указан в скрипте.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(window).scroll(function (){
$('.panel-sector').each(function (){
var PAGE1 = $(window).scrollTop();
var PAGE2 = $(this).offset().top - 50;
if (PAGE1 > PAGE2) {    
 
$('.panel2-image-main-logo').css({"left": $(this).css('left'),});
 
}
});
});

В данном примере, после пролистывания "отметки" panel-sector'a второе изображение логотипа в шапке, смещается на 150 пикселей вправо, тем самым перекрывая первое. Значение взято из файла стилей :

CSS
1
2
3
4
5
6
7
8
9
10
11
12
#PAGE-1{
height:100%;
width:100%;
left: -150px;
}
 
#PAGE-2{
background:#222222;
height:100%;
width:100%;
left: 13px;
}

Собственно чего я хочу : указывать необходимый параметр стиля, непосредственно в самом скрипте, который не будет привязан к стилю конкретного CSS (this).css. Сейчас же, данный скрипт, просто перехватывает параметры из PAGE-1 и PAGE-2, которые привязаны к panel-sector'у при этом, параметры присвоенные этим страницам, влияют и на них самих, из за чего, я сильно ограничен в своих действиях.

Я был бы очень признателен, если кто нибудь, исходя из моего примера, показал бы рабочий скрипт, в котором можно указать только <div>, который необходимо изменить и его точный параметр, к примеру : background:#222222; , указанный в самом скрипте , без необходимости тянуть необходимые параметры из конкретного класса.

Надеюсь, что мне удалось донести проблему более менее понятно. Ещё раз извиняюсь за то, если этот вопрос сто раз поднимался. Жду ваших предложений. Спасибо.

Добавлено через 2 часа 36 минут
Спасибо, разобрался. Адаптировал конечно криво, но вроде работает.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
 
 $(document).ready(function(){
 $(window).scroll(function(){  
 if ($(window).scrollTop() > 900 ){
 $(".panel2-image-main-logo").css("left", "13px");
$("#panel").css("background", "white");
 
}
 
if ($(window).scrollTop() < 900 ){
$(".panel2-image-main-logo").css("left", "-150px");
$("#panel").css("background", "black");
}
 
</script>

Единственное, пока не понял, как к этому делу прикрутить мною созданный класс '.panel-sector', чтобы переключение происходило на необходимых страницах сайта, а не от пролистанных вниз пикселей. Этот класс, задумывался для того, чтобы убрать проблему с разрешениями экрана, а именно, строго в необходимом месте совершать подмену параметров.

Может кто нибудь привести необходимый вариант, с включённым классом '.panel-sector'? Ещё раз благодарю.

Добавлено через 4 часа 40 минут
Всем доброго времени суток. Появилась проблема, с отображением элементов шапки, при использовании скрипта, описанного выше. Как оказалось, скрипт меняет значения, но только при скролле. Сейчас поясню, что я имею ввиду : само собой, задача была, чтобы действия и происходили во время скролла, но при этом, подразумевалось, чтобы при скролле просто происходила замена одного элемента стиля, на другой, при этом не нарушалась логика работы элементов хедера.

Сейчас же : страница загружается, панель в хедере работает так, как задумано, то есть : при наведении курсора, на элемент меню, он подсвечивается, так, как прописано в его стиле :

CSS
1
2
3
.menu_opener:hover p{
color:#fd7c22;
}

Если начать прокрутку, скрипт начинает работать и перерисовывает необходимые элементы, однако, если при этом навести курсор на меню снова, оно перестаёт подсвечиваться и подсвечивается только в том случае, если держать курсор на элементе МЕНЮ и начать прокручивать колесо мыши. Как избавится от этого эффекта и как должен выглядеть скрипт, чтобы все элементы нормально отображались после прокрутки, а не во время прокрутки. Спасибо.

Сам скрипт, со всеми параметрами :

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(document).ready(function(){
$(window).scroll(function(){  
if ($(window).scrollTop() > 910 ){
$(".panel2-image-main-logo").css("left", "13px");
$("#panel").css("background", "white");
$(".menu_opener p").css("color", "black");
$(".menu_opener div").css("background", "black");
$(".menu_opener:hover div").css("background", "#f8f8f8");
$(".menu_opener:hover p").css("color", "#fd7c22");
$(".menu nav a").css("color", "black");
$(".menu nav a.active").css("color", "#fd7c22");
$(".menu nav a:hover").css("color", "#fd7c22");
$(".menu nav a.active").css("background-color", "white");
$(".menu nav a:hover").css("background-color", "white");
 
}
 
if ($(window).scrollTop() < 910 ){
$(".panel2-image-main-logo").css("left", "-150px");
$("#panel").css("background", "#222222");
$(".menu_opener p").css("color", "#cecece");
$(".menu_opener div").css("background", "#cecece");
$(".menu_opener:hover div").css("background", "#f8f8f8");
$(".menu_opener:hover p").css("color", "#fd7c22");
$(".menu nav a").css("color", "#f8f8f8");
$(".menu nav a.active").css("color", "#fd7c22");
$(".menu nav a:hover").css("color", "#fd7c22");
$(".menu nav a.active").css("background-color", "#222");
$(".menu nav a:hover").css("background-color", "#222");
}
});
});

@Anna5194 · 26.03.2019, 09:37

Уважаемый автор поста, если вы нашли ответ на свой вопрос, молю, напишите мне. Потому что я сама сейчас сижу мучаюсь со сменой стилей. Мне нужно как-то высчитать, когда заканчивается меню, и чтобы на этом конце произошла смена стилей css. Вроде аддаптивной вёрстки.

1. var e = document.getElementById("cont");
2. var y = e.scrollHeight;

1) получила блок с меню по его id, которое назвала 'cont'.
2) вычислила его высоту через scrollHeight.

window.scrollY < y - пыталась задать, что при проскроливании меньше, чем найденная высота, будет один стиль
window.scrollY > y - а при проскроливании на больше, чем эта высота - другой.

В чём моя ошибка?((( Напишите мне кто-нибудь. Помогите!(((

@Уф · 26.03.2019, 10:54

Anna5194, а что таки не работает? https://jsfiddle.net/91ktr4gw/

Добавлено через 21 секунду

JavaScript
1
2
3
4
5
6
7
window.onscroll = function(e){
   var el = document.getElementById("menu");
   var y = el.scrollHeight + el.offsetTop;
   var b = document.getElementsByTagName("BODY")[0];
   if(window.scrollY < y ) b.style.background = "#cfc";
   else b.style.background = "#fcc";
   }

@Anna5194 · 26.03.2019, 11:13

Хахаха))) тот самый момент, когда у вас код запускается, при этом у меня точно такой же код - нет))) я сейчас сижу и смеюсь от того, что я без понятия, почему он не работает))) у меня сейчас просто истерика, что код фурычит у других, но не у меня))) спасибо, что ответили)))

Если что, вот моя тема с тем самым злополучным кодом)

Плавающее меню

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение/ Перевод https:/ / **********/ gallery/ thinkpad-x220-tablet-porn-gzoEAjs . . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@Anna5194 0 / 0 / 0 Регистрация: 25.03.2019 Сообщений: 62 Записей в блоге: 6
	26.03.2019, 09:37
	Уважаемый автор поста, если вы нашли ответ на свой вопрос, молю, напишите мне. Потому что я сама сейчас сижу мучаюсь со сменой стилей. Мне нужно как-то высчитать, когда заканчивается меню, и чтобы на этом конце произошла смена стилей css. Вроде аддаптивной вёрстки. 1. var e = document.getElementById("cont"); 2. var y = e.scrollHeight; 1) получила блок с меню по его id, которое назвала 'cont'. 2) вычислила его высоту через scrollHeight. window.scrollY < y - пыталась задать, что при проскроливании меньше, чем найденная высота, будет один стиль window.scrollY > y - а при проскроливании на больше, чем эта высота - другой. В чём моя ошибка?((( Напишите мне кто-нибудь. Помогите!((( 0

@Anna5194 0 / 0 / 0 Регистрация: 25.03.2019 Сообщений: 62 Записей в блоге: 6
	26.03.2019, 11:13
	Хахаха))) тот самый момент, когда у вас код запускается, при этом у меня точно такой же код - нет))) я сейчас сижу и смеюсь от того, что я без понятия, почему он не работает))) у меня сейчас просто истерика, что код фурычит у других, но не у меня))) спасибо, что ответили))) Если что, вот моя тема с тем самым злополучным кодом) Плавающее меню 0