|
Сообщение от 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>