Dynamische CSS-Klasse zu Fixed DIV hinzufügen, wenn es zu einem anderen HTML-Element gescrollt wird

Question

Ich habe mehrere ähnliche Fragen hier auf StackOverflow gelesen, ach, keine der Lösungen funktionierte für mich.

Ich möchte eine CSS-Klasse dynamisch zu HTML-Element hinzufügen, wenn es die Seite nach einem anderen HTML-Element gescrollt wird und die Klasse entfernen, wenn der Benutzer die Seite zurück scrollt.

Insbesondere möchte ich Position ändern: fixed eines DIV-Element zu position: absolute, wenn es die Spitze der Fußzeile div erreicht, so dass effektiv das DIV-Element sein stoppt zum unteren Rand des Bildschirms befestigt und Stöcke am oberen Rand der Fußzeile div, so dass es dort bleibt, während der Benutzer weiter den Rest der Seite nach unten scrollt.

Ich habe versucht, mehrere JavaScript-Code-Snippets anzupassen, aber keine funktionierte genau so, wie ich es möchte. Hier ist mein bester Versuch:

$(function() { 
    var menu = $('#fixedbtn'); 
$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 

if (scroll >= $('#footer-1').offset().top) { // check the offset top 
    menu.addClass('fixedPosition'); 
} else { // check the scrollHeight 
    menu.removeClass('fixedPosition'); 
} 
}); 
}); 

Ich mag die Klasse „fixedPosition“ die #fixedbtn div hinzuzufügen, wenn es vorbei an der Spitze des # footer-1 div, gescrollt wird und auch die Klasse entfernen, wenn die Der Benutzer scrollt zurück, so dass # footer-1 vom unteren Bereich des Ansichtsfensters zurückfällt.

Die Verwendung von festen Pixelabständen von der Seite oben funktioniert in diesem Fall nicht für mich. Ich möchte den Ereignisauslöser, der die Klasse dem div hinzufügt, um zu feuern, wenn der obere Teil des < # footer-1> div auf dem unteren Bildschirm des Benutzers angezeigt wird.

Könnten Sie, andere Code-Dichter, mich bitte zur richtigen Lösung führen, um die gewünschten Ergebnisse zu erzielen?

Answer 1

this helps

$(function() { 
var menu = $('#fixedbtn'); 
function isInViewport($this) { 
    var elementTop = $this.offset().top; 
    var elementBottom = elementTop + $this.outerHeight(); 
    var viewportTop = $(window).scrollTop(); 
    var viewportBottom = viewportTop + $(window).height(); 
    if(elementTop < viewportBottom ==true){ 
     menu.addClass('fixedPosition'); 
    }else { 
     menu.removeClass('fixedPosition'); 
    } 
} 
$(window).scroll(function() { 
isInViewport($('#footer-1')) 
}); 
}); 

$(function() { 
 
var menu = $('#fixedbtn'); 
 
function isInViewport($this) { 
 
\t var elementTop = $this.offset().top; 
 
\t var elementBottom = elementTop + $this.outerHeight(); 
 
\t var viewportTop = $(window).scrollTop(); 
 
\t var viewportBottom = viewportTop + $(window).height(); 
 
\t if(elementTop < viewportBottom ==true){ 
 
\t \t menu.addClass('fixedPosition'); 
 
\t }else { 
 
\t \t menu.removeClass('fixedPosition'); 
 
\t } 
 
} 
 
$(window).scroll(function() { 
 
isInViewport($('#footer-1')) 
 
}); 
 
});

.conatiner{ 
 
height:2000px; 
 
} 
 
#footer-1{ 
 
background-color:red; 
 
position:relative; 
 
} 
 
#fixedbtn{ 
 
background-color: blue; 
 
width: 55px; 
 
height: 20px; 
 
position: fixed; 
 
left: 0; 
 
bottom: 0; 
 
} 
 
#fixedbtn.fixedPosition{ 
 
background-color: white; 
 
position:absolute; 
 
left:0; 
 
top:0; 
 
} 
 
.stuck{ 
 
height:800px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="conatiner"> 
 
<div class="stuck"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> 
 
</div> 
 

 
<div id="footer-1"> 
 
<div id="fixedbtn"> 
 
fixedbtn 
 
</div> 
 
#footer-1 
 
</div> 
 
</div>