DIV sobald erreicht fixieren und bei einer bestimmten Position wieder droppen


Tryet

Grünschnabel
#1
Hallo zusammen,

ich bräuchte etwas Unterstützung bei meinem vorhaben.

Was ich schon hinbekommen habe ist, dass das DIV, sobald mit dem oberen Bildschirmrand erreicht, fixiert wird und dadurch "mitgenommen" wird.
Leider bekomme ich es nicht hin, diesen wieder zu droppen sobald ein anderes Div (welches ihm im weg steht) gedroppt wird.

So hängt das DIV (ein Werbebanner) leider ziemlich unschön in den Footer hinein. Ich hätte gerne, dass der Banner vor dem Footer gedroppt wird und in der Position verweilt, bis wieder rauf gescrollt wird, danach sollte er wieder fixiert sein.

Habe echt schon einiges versucht, wäre deshalb für eure kompetente Hilfe sehr dankbar!

CSS mäßig sieht es wie folgt aus (Relative>Absolute>Fixed kombi damit der Banner in der Sidebar-spur bleibt):
CSS:
// Bevor der Banner fixiert wird //
#sidebar #search-googlecontainer {
    position: relative;
    height: 100%;
    width: 200px;
    min-height: 620px;}
    
#search-googlecontainer .absolutesearch-google .search-google {
    position: absolute;
    margin-top: 15px;
    display: inline;}


// Nachdem das DIV erreicht wird, wird .fixedsearch-google angehängt//
#search-googlecontainer .absolutesearch-google .search-google.fixedsearch-google {
    display: inline;
    margin: 70px 0 0 0;
    position: fixed;
    top: 0;
    width: 162px;
    height: 602px;
    clear: both;
    transition: 1s;
    -webkit-transform: translate3d(0,0,0);}
JavaScript mäßig sieht es momentan wie folgt aus:
Javascript:
   // Cache selectors outside callback for performance.
    var $window = $(window),
       $stickyEl = $('.search-google'),
       elTop = $stickyEl.offset().top;

        $window.scroll(function() {
        $stickyEl.toggleClass('fixedsearch-google', $window.scrollTop() > elTop);
    });
Ich wäre für eure Hilfe wirklich sehr dankbar, da ich schon echt am verzweifeln bin. :(

Lg. Tryet
 

Anhänge