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.
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>