Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.05.2015, 23:11
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

Задать стиль одному элементу, при скролле до другого
Подскажите необходимо задавать фон 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>

Последний раз редактировалось djonA, 21.05.2015 в 01:45.
Ответить с цитированием
  #2 (permalink)  
Старый 21.05.2015, 09:40
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,125

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

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

.on {
   /* не навел */
}
.on:hover {
   /* когда навел */
}
Ответить с цитированием
  #3 (permalink)  
Старый 21.05.2015, 09:45
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,125

Как вариант...

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 21.05.2015, 10:25
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

Спасибо большое, отлично работает.

Еще пытаюсь сделать что бы работало для 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
Ответить с цитированием
  #5 (permalink)  
Старый 21.05.2015, 11:57
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,125

Не совсем понимаю для чего добавлять класс при "наведении"? Для этого уже есть псевдокласс :hover
Ответить с цитированием
  #6 (permalink)  
Старый 21.05.2015, 12:08
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

У меня есть наверху зафиксированное меню.
И мне надо при скролинге до определенных элементов на странице в этом меню выделять соответствующий 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"
Ответить с цитированием
  #7 (permalink)  
Старый 21.05.2015, 14:03
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,125

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

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

<!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>
Ответить с цитированием
  #8 (permalink)  
Старый 21.05.2015, 16:20
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

А подскажите как сделать более оптимально?
Ответить с цитированием
  #9 (permalink)  
Старый 22.05.2015, 08:44
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,125

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

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

Можно присвоить всем "отслеживаемым" элементам некий класс... В некий атрибут поместить информацию по которой можно вычислить его "парный" элемент...
Затем при onscroll проверять отслеживаемые элементы... Проверять их "видимость" и совершать (если надо) действия с их парным элементом...
Ответить с цитированием
  #10 (permalink)  
Старый 22.05.2015, 14:33
Профессор
Отправить личное сообщение для djonA Посмотреть профиль Найти все сообщения от djonA
 
Регистрация: 02.05.2012
Сообщений: 197

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

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

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

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



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как задать актуальное значение ползунка при движении gevorg Javascript под браузер 15 21.01.2015 15:07
как при задании массива задать отрицание imedia Элементы интерфейса 2 19.11.2014 11:38
Задать зависимость отступа одного элемента от длины другого Мария86 Events/DOM/Window 8 17.11.2012 02:55
OnDrag как задать стиль Антон Крамолов (X)HTML/CSS 2 31.07.2012 14:22
Как задать изменение src при прокрутке chandler Элементы интерфейса 3 12.01.2012 01:23