Sticky Nav, erst nach bestimmtem Element sticky
Ich habe folgenden Code .....
Wenn ich jetzt möchte, dass die Navigation erst sticky wird, wenn ein bestimmtes Element (in diesem Fall das div) aus dem Bild scrollt, was muss ich dann ändern?
Ich weiß, ich könnte jetzt im Script sagen okay, das div ist 500px hoch, mach das bitte ab 500px. Aber was, wenn ich sage width:100%; height:auto;? Dann ist die Höhe ja immer wieder unterschiedlich... Brauch da quasi ein responsive workaround
Der hier verwendete Code
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
nav{
height:50px;
border:2px solid red;
background:grey;
color:white;
font-size:40px;
left:0;
display:none;
text-align:center;
position:fixed;
top:0px;
width:100%;
}
body{
height:3000px;
}
#basti1012{
margin-top:1234px;
height:123px;
background:green;
color:white;
border:12px solid black;
}
#info{
height:200px;
border:2px solid red;
background:grey;
color:white;
display:block;
font-size:20px;
left:0;
text-align:center;
position:fixed;
top:50px;
width:20%;
min-width:200px;
}
</style>
</head>
<body>
<div id="info">Scroll mal in Fenster</div>
<nav>navigation</nav>
<div id="basti1012"> wenn man das element sieht wird die navigation eingeblendet</div>
</body>
<script>
function isElementPartiallyInViewport(el){
if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];
var rect = el.getBoundingClientRect();
var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
var windowWidth = (window.innerWidth || document.documentElement.clientWidth);
var vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
var horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
return (vertInView && horInView);
}
function isElementInViewport (el) {
if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];
var rect = el.getBoundingClientRect();
var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
var windowWidth = (window.innerWidth || document.documentElement.clientWidth);
return (
(rect.left >= 0)
&& (rect.top >= 0)
&& ((rect.left + rect.width) <= windowWidth)
&& ((rect.top + rect.height) <= windowHeight)
);
}
window.addEventListener('scroll',function(){
nav=document.getElementsByTagName('nav')[0];
ele=document.getElementById('basti1012');
info=document.getElementById('info');
var inVpFull = isElementInViewport(ele);
var inVpPartial = isElementPartiallyInViewport(ele);
if(inVpFull==true){
info.innerHTML="Jetzt ist das Element ganz zu sehen: " + inVpFull;
nav.style.display='block';
}else{}
if(inVpPartial==true){
info.innerHTML="Element ist im Fenster";
if(inVpFull==true){
info.innerHTML="Jetzt ist das Element ganz zu sehen";
}else{
info.innerHTML="Jetzt sieht man es nur zum Teil";
}
}else{
info.innerHTML="Element ist auserhalb des fensters";
nav.style.display='none';
}
})
</script>
</html>