Scrollen Zeigt Link un Navigation
Beim klick auf einen Link in der Navigation wird zum Anker gesprungen.
Beim Scrollen auf der Seite wird automatische in der Navigation farblich angezeigt, bei welchen Ankerpunkt man gerade ist.
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
nav{
position:fixed;
width:100%;
top:0;
display:flex;
}
a{
flex:1;
background:lightgrey;
}
#id1{
margin-top:500px;
}
#id2{
margin-top:1000px;
}
#id3{
margin-top:1500px;
}
#id4{
margin-top:2000px;
}
.ank{
padding:100px;
width:100%;
dislay:block;
height:50px;
background:lightgrey;
text-align:center;
}
</style>
</head>
<body>
<nav>
<a class="menueanker" href="#id1">Anker 1 </a>
<a class="menueanker" href="#id2">Anker 2 </a>
<a class="menueanker" href="#id3">Anker 3 </a>
<a class="menueanker" href="#id4">Anker 4 </a>
</nav>
<div id="id1" class="ank">Anker Ort 1 top:500px</div>
<div id="id2" class="ank">Anker Ort 2 top:1000px</div>
<div id="id3" class="ank">Anker Ort 3 top:1500px</div>
<div id="id4" class="ank">Anker Ort 4 top:2000px</div>
<script>
$('.menueanker').click(function(){
$('.menueanker').css('background','lightgrey');
$(this).css('background','red');
})
function isElementVisible(elementToBeChecked){
var TopView = $(window).scrollTop();
var BotView = TopView + $(window).height();
var TopElement = $(elementToBeChecked).offset().top;
var BotElement = TopElement + $(elementToBeChecked).height();
return ((BotElement <= BotView) && (TopElement >= TopView));
}
$(window).scroll(function () {
isOnView1 = isElementVisible("#id1");
isOnView2 = isElementVisible("#id2");
isOnView3 = isElementVisible("#id3");
isOnView4 = isElementVisible("#id4");
if(isOnView1) {
$('.menueanker').css('background','lightgrey');
$('.menueanker:nth-child(1)').css('background','red');
}
if(isOnView2) {
$('.menueanker').css('background','lightgrey');
$('.menueanker:nth-child(2)').css('background','red');
}
if(isOnView3) {
$('.menueanker').css('background','lightgrey');
$('.menueanker:nth-child(3)').css('background','red');
}
if(isOnView4) {
$('.menueanker').css('background','lightgrey');
$('.menueanker:nth-child(4)').css('background','red');
}
});
</script>
</body>
</html>