Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Задать стиль одному элементу, при скролле до другого (https://javascript.ru/forum/misc/55923-zadat-stil-odnomu-ehlementu-pri-skrolle-do-drugogo.html)

djonA 20.05.2015 23:11
Задать стиль одному элементу, при скролле до другого
 
Подскажите необходимо задавать фон 1 элементу при прокрутке до другого.
Нашел на форуме скрипт, применил, все работает но нужно что бы он срабатывал 2 раз, когда навожу и когда не навожу, а он у меня постоянно отрабатывает.

Поправьте плизз:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body style="height: 2000px">
<span id="test-elem1" style="font-size: 30px;position:fixed;">TEST1</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span id="test-elem" style="font-size: 30px">TEST</span>


<script>
window.onscroll = function() {
  if ( checkViewport() ) {
    // выполнится если элемент хотя бы частично видно
document.getElementById("test-elem1").style.background = "rgb(204, 255, 204)";
  } 
  else{document.getElementById("test-elem1").style.background = "white";}
}

function checkViewport() {

	     var $myElement = document.getElementById("test-elem"),

	         landmark = $myElement.getBoundingClientRect(),

	         visibility = landmark.top + $myElement.scrollHeight > 0 && landmark.left + $myElement.scrollWidth > 0 && landmark.bottom - $myElement.scrollHeight < document.documentElement.clientHeight && landmark.right - $myElement.scrollWidth < document.documentElement.clientWidth

	     return visibility

	 }

</script>

</body>
</html>


Или все правельно все так и должно быть?

И подскажите как быть если необходимо реализовать данный скрипт для 2 div 

<span id="test-elem1" style="font-size: 30px;position:fixed;">TEST1</span>
<span id="test-elem10" style="font-size: 30px;position:fixed;">TEST10</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<span id="test-elem0" style="font-size: 30px">TEST0</span>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span id="test-elem" style="font-size: 30px">TEST</span>

ksa 21.05.2015 09:40
Цитата:
Сообщение от djonA
необходимо задавать фон 1 элементу при прокрутке до другого.
...
но нужно что бы он срабатывал 2 раз, когда навожу и когда не навожу
Если я правильно распознал "это" - то
Не присваивай цвета. Назначай или убирай некий класс... В ЦСС опиши этот класс в двух вариантах...

Например класс .on...

.on {
   /* не навел */
}
.on:hover {
   /* когда навел */
}

ksa 21.05.2015 09:45
Как вариант...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.on {
	border: 1px solid;
}
.on:hover {
	background-color: rgb(204, 255, 204);
}
</style>
</head>
<body style="height: 2000px">
<span id="test-elem1" style="font-size: 30px;position:fixed;">TEST1</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span id="test-elem" style="font-size: 30px">TEST</span>


<script>
window.onscroll = function() {
	if ( checkViewport() ) {
		// выполнится если элемент хотя бы частично видно
		document.getElementById("test-elem1").className = 'on';
	} else{
		document.getElementById("test-elem1").className = '';
	};
};

function checkViewport() {
	var $myElement = document.getElementById("test-elem"),
	landmark = $myElement.getBoundingClientRect(),
	visibility = landmark.top + $myElement.scrollHeight > 0 && landmark.left + $myElement.scrollWidth > 0 && landmark.bottom - $myElement.scrollHeight < document.documentElement.clientHeight && landmark.right - $myElement.scrollWidth < document.documentElement.clientWidth

return visibility

}
</script>
</body>
</html>

djonA 21.05.2015 10:25
Спасибо большое, отлично работает.

Еще пытаюсь сделать что бы работало для 2 для элементов на странице, не получается сделать:

у меня
<span id="test-elem1" style="font-size: 30px;position:fixed;">TEST1</span>
<span id="test-elem10" style="font-size:30px;position:fixed;margin-left:100px">TEST10</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<span id="test-elem0" style="font-size: 30px">TEST0</span>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span id="test-elem" style="font-size: 30px">TEST</span>


Если навожу на TEST0 - то добавлять класс TEST10
а если навожу на TEST - то добавлять класс TEST1

ksa 21.05.2015 11:57
Не совсем понимаю для чего добавлять класс при "наведении"? Для этого уже есть псевдокласс :hover

djonA 21.05.2015 12:08
У меня есть наверху зафиксированное меню.
И мне надо при скролинге до определенных элементов на странице в этом меню выделять соответствующий div.
<span id="1" style="font-size: 30px;position:fixed;">1</span>
<span id="2" style="font-size:30px;position:fixed;margin-left:100px">2</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<span id="10" style="font-size: 30px">10</span> - при наводе сюда добавлять класс id="1"
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span id="20" style="font-size: 30px">20</span> - при наводе сюда добавлять класс id="2"

ksa 21.05.2015 14:03
Цитата:
Сообщение от djonA
надо при скролинге до определенных элементов на странице в этом меню выделять соответствующий div
Аааа, вона че...

Не оптимально, конечно... Но как иллюстрация. :D 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.on {
	border: 1px solid;
}
.on:hover {
	background-color: rgb(204, 255, 204);
}
</style>
</head>
<body style="height: 2000px">
<span id="test1-elem1" style="font-size: 30px;position:fixed;">TEST1</span>
<span id="test2-elem1" style="font-size: 30px;position:fixed;left:150px">TEST2</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span id="test1-elem" style="font-size: 30px">TEST1</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span id="test2-elem" style="font-size: 30px">TEST2</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


<script>
window.onscroll = function() {
	if ( checkViewport("test1-elem") ) {
		// выполнится если элемент хотя бы частично видно
		document.getElementById("test1-elem1").className = 'on';
	} else{
		document.getElementById("test1-elem1").className = '';
	};
	if ( checkViewport("test2-elem") ) {
		// выполнится если элемент хотя бы частично видно
		document.getElementById("test2-elem1").className = 'on';
	} else{
		document.getElementById("test2-elem1").className = '';
	};
};

function checkViewport(Id) {
	var $myElement = document.getElementById(Id),
	landmark = $myElement.getBoundingClientRect(),
	visibility = landmark.top + $myElement.scrollHeight > 0 && landmark.left + $myElement.scrollWidth > 0 && landmark.bottom - $myElement.scrollHeight < document.documentElement.clientHeight && landmark.right - $myElement.scrollWidth < document.documentElement.clientWidth

return visibility

}
</script>
</body>
</html>

djonA 21.05.2015 16:20
А подскажите как сделать более оптимально?

ksa 22.05.2015 08:44
Цитата:
Сообщение от djonA
как сделать более оптимально?
Всякая оптимальность хороша для достаточно большего количества элементов... :)

В твоем случае их сколько?

Можно присвоить всем "отслеживаемым" элементам некий класс... В некий атрибут поместить информацию по которой можно вычислить его "парный" элемент...
Затем при onscroll проверять отслеживаемые элементы... Проверять их "видимость" и совершать (если надо) действия с их парным элементом...

djonA 22.05.2015 14:33
Не в моем случае элементов всего 5 так что можно не изобретать велосипед.

Единственное нашел недостаток если 2 элемента находятся в области видимой, то будет добавлять класс обоим элементам в шапке.

А я теперь ломаю голову как изменить скрипт, что бы если видно 2 элемента добавляло класс тому элементу которые больше видный.

Не подскажите в какую сторону копать?


Часовой пояс GMT +3, время: 14:12.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице