Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.11.2017, 19:06
Аспирант
Отправить личное сообщение для Zombie_Killer Посмотреть профиль Найти все сообщения от Zombie_Killer
 
Регистрация: 20.06.2017
Сообщений: 38

Как сделать чтобы при прокрутке элемент изменялся
Привет! У меня есть меню, которая находится сверху сайте. Оно зафиксировано. Я хочу чтобы при прокрутке цвет текста и фон изменялся, а если элемент вновь находится вверху то все делалось обратно. Желательно с комментариями. Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 02.11.2017, 19:23
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

<div class="menu"></div>


.menu.fixed {
    left: 0;
    position: fixed;
    top: 0;
}


var menu = document.querySelector('.menu');
var menuIsFixed = false;
var top = 100; //При какой позиции фиксировать

window.addEventListener('scroll', function() {
	if(window.pageYOffset > top !== navMenuIsFixed) {
		menuIsFixed = !menuIsFixed;
		menu.classList[menuIsFixed ? 'add' : 'remove']('fixed');
	}
});

Последний раз редактировалось ruslan_mart, 03.11.2017 в 07:38.
Ответить с цитированием
  #3 (permalink)  
Старый 02.11.2017, 19:29
Аспирант
Отправить личное сообщение для Zombie_Killer Посмотреть профиль Найти все сообщения от Zombie_Killer
 
Регистрация: 20.06.2017
Сообщений: 38

Сообщение от ruslan_mart Посмотреть сообщение
<div class="menu"></div>


.menu.fixed {
    left: 0;
    position: fixed;
    top: 0;
}


var menu = document.querySelector('.menu');
var menuIsFixed = false;
var top = 100; //При какой позиции фиксировать

window.addEventListener('scroll', function() {
	if(window.pageYOffset > top != navMenuIsFixed) {
		menuIsFixed = !menuIsFixed;
		menu.classList[menuIsFixed? 'add' : 'remove']('fixed');
	}
});
8 строчка мне не понятна, как и последняя
Ответить с цитированием
  #4 (permalink)  
Старый 02.11.2017, 19:55
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 509

Сообщение от Zombie_Killer
8 строчка мне не понятна,
А так?

if (menuIsFixed) {
	menu.classList.add('fixed');
} else {
	menu.classList.remove('fixed');
}
Ответить с цитированием
  #5 (permalink)  
Старый 02.11.2017, 20:02
Аспирант
Отправить личное сообщение для Zombie_Killer Посмотреть профиль Найти все сообщения от Zombie_Killer
 
Регистрация: 20.06.2017
Сообщений: 38

спасибо
но чето не работает(
Ответить с цитированием
  #6 (permalink)  
Старый 02.11.2017, 20:12
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,705

Zombie_Killer, вероятно работает, просто вы от него не того ждете.
Код, что ruslan_mart написал не решает вашей задачи.
Он при скролле страницы добавляет элементу с классом "menu" класс "fixed", если пользователь проскроллил от 100 и больше пикселей и удаляет этот класс, если пользователь вернулся в начало страницы.
Чтобы при каждом скролле не добавлять/удалять класс у элемента была использована переменная, которая хранит состояние наличия класса "fixed" у ".menu".
Ответить с цитированием
  #7 (permalink)  
Старый 02.11.2017, 20:18
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 509

Сообщение от Nexus
Код, что ruslan_mart написал не решает вашей задачи.
Тут ведь только изменить декларации в цсс классе на нужные и переменной top подходящий брейкпоинт. Любой класс туглить.
.is-color {
  color: black;
  background-color: orange;      
}
Ответить с цитированием
  #8 (permalink)  
Старый 03.11.2017, 07:37
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Сообщение от Rasy
А так?
Можно ещё вот так:

menu.classList.toggle('fixed', menuIsFixed);


Но это решение меньше поддерживается браузерами

Сообщение от Nexus
Код, что ruslan_mart написал не решает вашей задачи.
Вы абсолютно правы. Этот кусок кода я писал очень давно, просто скопировал и вставил сюда. Но суть, как подчеркнул Rasy, та же. Нужно просто поменять стили/класс под себя.

Последний раз редактировалось ruslan_mart, 03.11.2017 в 07:39.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать чтобы скрипт не спотыкался если какой то элемент не находит на странице? денис77447327 Общие вопросы Javascript 1 04.10.2017 17:10
Как сделать чтобы кнопка «Назад» работала бы в пределах определенного сайта? Askeer Общие вопросы Javascript 0 12.10.2016 18:58
Как сделать чтобы не перекидывало на другую страницу при отправке сообщения? krasnov8953 Общие вопросы Javascript 12 29.08.2015 18:17
Как сделать, чтобы при вводе числа в поле добавлялись разделители групп разрядов? Hurray Элементы интерфейса 13 18.02.2015 14:07
Как сделать чтобы textarea тянулась в высоту при добавлении в нее текста? javasc Общие вопросы Javascript 4 27.03.2012 22:14