JavaScript Sticky Sidebar bis zu einem bestimmten Element?

[FrazeColder]

Guten Tag zusammen,

ich bin nun mittlerweile schon verzweifelt 2 Tage am probieren, meine Sidebar sticky zu machen. An sich ist das auch kein Problem. Nur bekomme ich es nicht hin, dass die Sidebar bei einem bestimmten Element, und zwar bei #abspann, stehen bleiben soll. Also die Sidebar soll mitkommen, wenn man nach unten scrollt, aber das Ende der Sidebar soll bei #abspann stehen bleiben. Und wenn man wieder nach oben scrollt, soll sie bis zu ihrer eigentlichen Position mitkommen.

Ich hatte dieses Plugin schon ausprobiert: https://github.com/abouolia/sticky-sidebar
Mit Folgendem Code:

<script src="/sticky-sidebar.js"></script>
<script>
    jQuery(document).ready(function(){
        jQuery(".sidebar-content").stickySidebar({
            containerSelector: '#content',
            innerWrapperSelector: '.sidebar-content',
            topSpacing: 20,
            bottomSpacing: 20
        });
        jQuery('.sidebar-content').stickySidebar({containerSelector: '#abspann'})	
        jQuery('.sidebar-content').stickySidebar({stickyClass: '#abspann'});
    });
</script>

Da ist nur das Problem, dass ich es nicht hinbekomme bzw. keine Lösung finde, die Sidebar bei #abapann zum stehen zu bringen... Jemand eine Idee?

Und mit diesem Plugin geht es leider auch nicht: http://leafo.net/sticky-kit/
Da ich WordPress und Visual Composer nutzte und somit alles in Zeilen verschachtelt ist...

Es handelt sich dabei übrigens um diese Seite. Hat jemand eine Idee, wie ich mein Vorhaben umsetzten kann?
Ich bin leider echt am verzweifeln...

Mit freundlichen Grüßen und Vielen Dank

 

[r15ch13]

Soll das so aussehen?


#content ist das falsche Element. Das ist eine Stufe zuweit oben. Du musst das div auswaehlen welches nur die Sidebar und den Inhalt enthaellt, aber nicht den #abspann.



Musst zwei CSS Klassen hinzufuegen. Siehe

$('#sidebar-wrap').stickySidebar({
  topSpacing: 75, // wegen des Menues
  bottomSpacing: 20,
  containerSelector: '.sidebar-container',
  innerWrapperSelector: '.sidebar__inner'
});

 

[FrazeColder]

Danke dir. Du ich kann diesen div leider nicht auswählen, da dieser div auf jeder Seite durch Visual Composer unterschiedlich heißt...
Das ist mein Problem

 

[r15ch13]

Man kann CSS Klassen hinzufügen. Zumindest laut dem Video hier:
https://m.youtube.com/watch?feature=youtu.be&v=IWprFs6MOro

 

[FrazeColder]

Okay, cool. Danke Dir! - Geht jetzt

Außer wenn du schnell hochscrollst. Dann buggt das irgendwie und ich habe leider beim hochscrollen kein Spacing nach oben. Ne Idee, wie ich das noch hinbekomme?

Ich habe jetzt alle Seiten bearbeitet und sehe nun leider, dass es bei zweien leider nicht geht...
Wieso weiß ich allerdings nicht...

- #sidebar-wrap ist da
- .sidebar-container ist da
- .sidebar__inner wird über '#sidebar-wrap > div' angesprochen, da ich in dieser Klasse nichts eigenes einfügen kann mit Visual Composer...

Es handelt sich dabei einmal um diese und diese Seite...

Also die Sidebar wird zwar bei beiden mitgezogen, allerdings unten stoppt sie nicht... Wie könnte ich das lösen?