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

@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

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

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

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

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@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