Ein Div (Bottom) relative zu einem Footer offset verschieben
Ich habe einen Footer, der NICHT fest einfach am Ender der Page mit einer Höhe von 200px liegt.
Bei der Desktop Auflösung habe ich einen scrolltotop Button der FEST bei bottom 10px right 10px liegt.
Soweit so gut und funktioniert.
Wenn nun die Auflösung unter 1024px geht, habe ich etwas anderes css. Den scrolltotop Button wollte ich dennoch dort lassen.
Leider verdeckt er mir dann aber beim Footer unten etwas, was nicht sein darf.
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<script src="/js_webseite/jquery.js"></script>
<style>
*{
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;
min-height:1500px;
}
nav{
height:100px;
width:100%;
font-size:50px;
text-align:center;
border:2px solid black;
}
main{
font-size:20px;
text-align:center;
min-height:calc(1450px - 300px);
}
footer{
border:2px solid black;
width:100%;
font-size:100px;
text-align:center;
height:200px;
}
button{
height:30px;
width:100px;
borde:2px solid black;
font-size:22px;
bottom:10px;
right:10px;
position:fixed;
}
.buttonhoch1{
background:red;
}
.buttonhoch2{
background:green;
}
.buttonhoch3{
background:blue;
}
</style>
</head>
<body>
<nav>
NAVIGATION
</nav>
<main>
Ich habe dir mal was auf de schnelle zusammen gebaut.
Habe den Button andere classen gegeben.Da brauchst du dann nur noch die position angeben wo er hin soll.
Damit man das besser erkennt hat der Button 3 verschiedene Farben.
BLAU = De Footer ist nicht zu sehen
GÜN = Der Footer ist zu sehen , abe nicht vollständig
ROT = Der Footer ist komplett in sichtbaen Bereich
</main>
<footer id="foot">footer</footer>
<button class="buttonhoch3" id="topbutton">TOP</button>
<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 vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
return (vertInView)
}
function isElementInViewport (el) {
if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];
var rect = el.getBoundingClientRect();
var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
return ( (rect.top >= 0)
&& ((rect.top + rect.height) <= windowHeight)
);
}
window.addEventListener('scroll',function(){
ele=document.querySelector('#foot');
but=document.querySelector('#topbutton');
var inVpFull = isElementInViewport(ele);
var inVpPartial = isElementPartiallyInViewport(ele);
if(inVpPartial==true){
if(inVpFull==true){
// footer sieht man jetzt ganz
cla="buttonhoch1";
}else{
// foote sieht man nur etwas
cla="buttonhoch2";
}
}else{
// foote ist nicht sichtbar
cla="buttonhoch3";
}
if(but.classList.contains(cla)){
}else{
if(but.classList.contains("buttonhoch1")){
but.classList.remove("buttonhoch1");
}
if(but.classList.contains("buttonhoch2")){
but.classList.remove("buttonhoch2");
}
if(but.classList.contains("buttonhoch3")){
but.classList.remove("buttonhoch3");
}
but.classList.add(cla);
}
})
</script>
</body>
</html>