Öffnen von iframe beim scrollen
Hi
brauche ein Idee wie ich es anstellen könnte mittels iframes Inhalte(von Webseiten) anzeigen zu lassen, aber nur wenn das jeweilige "anzeigende" iframe sich in der Mitte meiner Webseite befindet, so dass sich jedes weitere iframe nur beim Scrollen meiner Webseite öffnet, und sich das darüber befindliche wieder schliesst.
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<script src="/js_webseite/jquery.js"></script>
<style>
body{
display:flex;
flex-direction:column;
min-height:1500px;
}
header{
background:#27abcd;
height:100px;
font-size:80px;
text-align:center;
}
nav{
font-size:40px;
text-align:center;
margin-bottom:500px;
display:block;
background:green;
}
.framebox{
border:2px solid black;
margin:120px auto;
width:60vw;
height:300px;
}
</style>
</head>
<body>
<header>HEADER</header>
<nav>Navigation<br>Bitte im Fenster Scrollen</nav>
<iframe class="framebox" id="frame1" src=""></iframe>
<iframe class="framebox" id="frame2" src=""></iframe>
<iframe class="framebox" id="frame3" src=""></iframe>
<iframe class="framebox" id="frame4" src=""></iframe>
<iframe class="framebox" id="frame5" src=""></iframe>
<iframe class="framebox" id="frame6" src=""></iframe>
<iframe class="framebox" id="frame7" src=""></iframe>
<iframe class="framebox" id="frame8" src=""></iframe>
<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)
}
var helper=false;
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)
);
// console.log(el.id+'='+rect.height+'='+rect.top)
}
var stylevariable='<style>*{ font-size:40px;text-align:center}</style>';
window.addEventListener('scroll',function(){
elem=document.querySelectorAll('.framebox');
elem.forEach(function(ele){
var inVpFull = isElementInViewport(ele);
var inVpPartial = isElementPartiallyInViewport(ele);
if(inVpPartial==true){
ele.setAttribute('srcdoc',`${stylevariable} Element ist im Fenster`);
ele.style.border='5px solid orange';
if(inVpFull==true){
ele.setAttribute('srcdoc',`${stylevariable} Jetzt ist das Element ganz zu sehen`);
ele.style.height='500px';
ele.style.border='5px solid green';
}else{
ele.setAttribute('srcdoc',`${stylevariable} Jetzt sieht man es nur zum Teil`);
ele.style.border='5px solid orange';
}
}else{
ele.setAttribute('srcdoc',`${stylevariable} Element ist auserhalb des fensters`);
ele.style.border='5px solid red';
}
});
})
</script>
</body>
</html>