Klebrige Seitenleiste: Bleiben Sie beim Scrollen nach unten und beim Scrollen nach oben oben

Ich habe seit einiger Zeit nach einer Lösung für mein Problem mit der klebrigen Seitenleiste gesucht. Ich habe eine konkrete Vorstellung davon, wie es sich verhalten soll. effektiv möchte ich, dass es beim Scrollen nach unten bleibt, und sobald Sie wieder nach oben scrollen, möchte ich, dass es in einer fließenden Bewegung (kein Springen) oben bleibt. Ich kann kein Beispiel dafür finden, was ich erreichen möchte, deshalb habe ich ein Bild erstellt, von dem ich hoffe, dass es den Punkt klarer verdeutlicht:

1. Die Seitenleiste befindet sich unter der Kopfzeile.
2. Während Sie nach unten scrollen, bleibt die Seitenleiste auf gleicher Höhe mit dem Inhalt der Seite, sodass Sie sowohl durch die Seitenleiste als auch durch den Inhalt scrollen können.
3. Erreichen Sie die Unterseite der Seitenleiste, die Seitenleiste bleibt am unteren Rand des Ansichtsfensters hängen (die meisten Plugins erlauben nur das Festhalten an der Oberseite, einige, die das Festhalten an der Unterseite ermöglichen, erlauben nicht beide).
4. Erreichen Sie den unteren Rand, die Seitenleiste befindet sich über der Fußzeile.
5. Während Sie nach oben scrollen, bleibt die Seitenleiste auf gleicher Höhe mit dem Inhalt, sodass Sie erneut durch den Inhalt und die Seitenleiste scrollen können.
6. Erreichen Sie die Oberseite der Seitenleiste, die Seitenleiste bleibt oben im Ansichtsfenster.
7. Erreichen Sie die Oberseite und die Seitenleiste befindet sich wieder unter der Kopfzeile.

Ich hoffe das sind genug Informationen. Ich habe eine jsfiddle erstellt, um alle Plugins / Skripte zu testen, die ich für diese Frage zurückgesetzt habe: http://jsfiddle.net/jslucas/yr9gV/2/ .

+1 auf das sehr schöne und illustrative Bild.

Ich weiß, dass es eine alte Frage ist, aber ich habe beiläufig dieselbe Frage gefunden, die Sie in forum.jquery.com gestellt haben, und eine Antwort dort ^{(von @ tucker973)} , eine nette Bibliothek vorgeschlagen, um dies zu machen, und wollte sie hier teilen.

Es heißt Sticky-Kit von @leafo

• Github Proyect
• Website
• einfaches Beispiel in jsFiddle ^{(gleicher Code wie das hier angehängte Snippet)}

Hier haben Sie den Code eines sehr einfachen Beispiels, das ich vorbereitet habe, und eine funktionierende Demo, um das Ergebnis zu sehen.

/*!
 * Sticky-kit
 * A jQuery plugin for making smart sticky elements
 *
 * Source: http://leafo.net/sticky-kit/
 */

$(function() {
  $(".sidebar").stick_in_parent({
    offset_top: 10
  });
});

* {
  font-size: 10px;
  color: #333;
  box-sizing: border-box;
}
.wrapper,
.header,
.main,
.footer {
  padding: 10px;
  position: relative;
}
.wrapper {
  border: 1px solid #333;
  background-color: #f5f5f5;
  padding: 10px;
}
.header {
  background-color: #6289AE;
  margin-bottom: 10px;
  height: 100px;
}
.sidebar {
  position: absolute;
  padding: 10px;
  background-color: #ccc;
  height: 300px;
  width: 100px;
  float: left;
}
.main {
  background-color: #ccc;
  height: 600px;
  margin-left: 110px;
}
.footer {
  background-color: #6289AE;
  margin-top: 10px;
  height: 250px;
}
.top {
  position: absolute;
  top: 10px;
}
.bottom {
  position: absolute;
  bottom: 10px;
}
.clear {
  clear: both;
  float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://leafo.net/sticky-kit/src/jquery.sticky-kit.js"></script>
<div class="wrapper">
  <div class="header"> <a class="top">header top</a>
    <a class="bottom">header bottom</a>

  </div>
  <div class="content">
    <div class="sidebar"> <a class="top">sidebar top</a>
      <a class="bottom">sidebar bottom</a>

    </div>
    <div class="main"> <a class="top">main top</a>
      <a class="bottom">main bottom</a>

    </div>
    <div class="clear"></div>
  </div>
  <div class="footer"> <a class="top">footer top</a>
    <a class="bottom">footer bottom</a>

  </div>
</div>

Natürlich gehen alle Credits an den Ersteller des Plugins. Ich habe dieses Beispiel nur gemacht, um es hier zu zeigen. Ich muss das gleiche Ergebnis erzielen, nach dem Sie gesucht haben, und fand dieses Plugin sehr nützlich.

Danke für die tolle Grafik. Ich suchte auch nach einer Lösung für diese Herausforderung!

Leider geht die andere hier veröffentlichte Antwort nicht auf Anforderung Nr. 5 ein, die die Möglichkeit vorsieht, reibungslos durch die Seitenleiste zurückzuscrollen.

Ich habe eine Geige erstellt, die alle Anforderungen implementiert: http://jsfiddle.net/bN4qu/5/

Die Kernlogik, die implementiert werden muss, ist:

If scrolling up OR the element is shorter than viewport Then
  Set top of element to top of viewport If scrolled above top of element
If scrolling down then
  Set bottom of element at bottom of viewport If scrolled past bottom of element

In der Geige verwende ich die CSS3-Transformation, um das Zielelement zu verschieben, sodass es in z. B. IE <9 nicht funktioniert. Die Logik ist jedoch solide, um einen anderen Ansatz zu verwenden.

Außerdem habe ich Ihre Geige so geändert, dass die klebrige Seitenleiste einen Hintergrund mit Farbverlauf hat. Dies hilft zu zeigen, dass das richtige Verhalten gezeigt wird.

Ich hoffe das ist nützlich für jemanden!

Hier ist ein Beispiel für die Implementierung:

JavaScript:

$(function() {

var $window = $(window);
var lastScrollTop = $window.scrollTop();
var wasScrollingDown = true;

var $sidebar = $("#sidebar");
if ($sidebar.length > 0) {

    var initialSidebarTop = $sidebar.position().top;

    $window.scroll(function(event) {

        var windowHeight = $window.height();
        var sidebarHeight = $sidebar.outerHeight();

        var scrollTop = $window.scrollTop();
        var scrollBottom = scrollTop + windowHeight;

        var sidebarTop = $sidebar.position().top;
        var sidebarBottom = sidebarTop + sidebarHeight;

        var heightDelta = Math.abs(windowHeight - sidebarHeight);
        var scrollDelta = lastScrollTop - scrollTop;

        var isScrollingDown = (scrollTop > lastScrollTop);
        var isWindowLarger = (windowHeight > sidebarHeight);

        if ((isWindowLarger && scrollTop > initialSidebarTop) || (!isWindowLarger && scrollTop > initialSidebarTop + heightDelta)) {
            $sidebar.addClass('fixed');
        } else if (!isScrollingDown && scrollTop <= initialSidebarTop) {
            $sidebar.removeClass('fixed');
        }

        var dragBottomDown = (sidebarBottom <= scrollBottom && isScrollingDown);
        var dragTopUp = (sidebarTop >= scrollTop && !isScrollingDown);

        if (dragBottomDown) {
            if (isWindowLarger) {
                $sidebar.css('top', 0);
            } else {
                $sidebar.css('top', -heightDelta);
            }
        } else if (dragTopUp) {
            $sidebar.css('top', 0);
        } else if ($sidebar.hasClass('fixed')) {
            var currentTop = parseInt($sidebar.css('top'), 10);

            var minTop = -heightDelta;
            var scrolledTop = currentTop + scrollDelta;

            var isPageAtBottom = (scrollTop + windowHeight >= $(document).height());
            var newTop = (isPageAtBottom) ? minTop : scrolledTop;

            $sidebar.css('top', newTop);
        }

        lastScrollTop = scrollTop;
        wasScrollingDown = isScrollingDown;
    });
}
});

CSS:

#sidebar {
  width: 180px;
  padding: 10px;
  background: red;
  float: right;
}

.fixed {
  position: fixed;
  right: 50%;
  margin-right: -50%;
}

Demo: http://jsfiddle.net/ryanmaxwell/25QaE/

Dies funktioniert in allen Szenarien wie erwartet und wird auch im IE gut unterstützt.

Ich suchte genau das Gleiche. Anscheinend musste ich nach obskuren Begriffen suchen, um eine ähnliche Frage mit der Grafik zu finden. Es stellt sich heraus, dass es genau das ist, wonach ich gesucht habe. Ich konnte keine Plugins finden und habe beschlossen, es selbst zu machen. Hoffentlich wird jemand dies sehen und verfeinern.

Hier ist ein schnelles und schmutziges Beispiel-HTML, das ich verwende.

<div id="main">
    <div class="col-1">
    </div>
    <div class="col-2">
        <div class="side-wrapper">
            sidebar content
        </div>
    </div>
</div>

Hier ist die jQuery, die ich gemacht habe:

var lastScrollPos = $(window).scrollTop();
var originalPos = $('.side-wrapper').offset().top;
if ($('.col-2').css('float') != 'none') {
    $(window).scroll(function(){
        var rectbtfadPos = $('.rectbtfad').offset().top + $('.rectbtfad').height();
        // scroll up direction
        if ( lastScrollPos > $(window).scrollTop() ) {
            // unstick if scrolling the opposite direction so content will scroll with user
            if ($('.side-wrapper').css('position') == 'fixed') {
                $('.side-wrapper').css({
                    'position': 'absolute',
                    'top': $('.side-wrapper').offset().top + 'px',
                    'bottom': 'auto'
                });
            } 
            // if has reached the original position, return to relative positioning
            if ( ($(window).scrollTop() + $('#masthead').height()) < originalPos ) {
                $('.side-wrapper').css({
                    'position': 'relative',
                    'top': 'auto',
                    'bottom': 'auto'
                });
            } 
            // sticky to top if scroll past top of sidebar
            else if ( ($(window).scrollTop() + $('#masthead').height()) < $('.side-wrapper').offset().top && $('.side-wrapper').css('position') == 'absolute' ) {
                $('.side-wrapper').css({
                    'position': 'fixed',
                    'top': 15 + $('#masthead').height() + 'px', // padding to compensate for sticky header
                    'bottom': 'auto'
                });
            }
        } 
        // scroll down
        else {
            // unstick if scrolling the opposite direction so content will scroll with user
            if ($('.side-wrapper').css('position') == 'fixed') {
                $('.side-wrapper').css({
                    'position': 'absolute',
                    'top': $('.side-wrapper').offset().top + 'px',
                    'bottom': 'auto'
                });
            } 
            // check if rectbtfad (bottom most element) has reached the bottom
            if ( ($(window).scrollTop() + $(window).height()) > rectbtfadPos && $('.side-wrapper').css('position') != 'fixed' ) {
                $('.side-wrapper').css({
                    'width': $('.col-2').width(),
                    'position': 'fixed',
                    'bottom': '0',
                    'top': 'auto'
                });
            }
        }
        // set last scroll position to determine if scrolling up or down
        lastScrollPos = $(window).scrollTop();

    });
}

Einige Notizen:

• .rectbtfad ist das unterste Element in meiner Seitenleiste
• Ich verwende die Höhe meines #masthead, da es sich um einen klebrigen Header handelt, der dies kompensieren muss
• Es gibt eine Überprüfung auf col-2 float, da ich ein responsives Design verwende und nicht möchte, dass dies auf kleineren Bildschirmen aktiviert wird

Wenn jemand dies ein bisschen weiter verfeinern kann, wäre das großartig.

function fixMe(id) {
    var e = $(id);
    var lastScrollTop = 0;
    var firstOffset = e.offset().top;
    var lastA = e.offset().top;
    var isFixed = false;
    $(window).scroll(function(event){
        if (isFixed) {
            return;
        }
        var a = e.offset().top;
        var b = e.height();
        var c = $(window).height();
        var d = $(window).scrollTop();
        if (b <= c - a) {
            e.css({position: "fixed"});
            isFixed = true;
            return;
        }           
        if (d > lastScrollTop){ // scroll down
            if (e.css("position") != "fixed" && c + d >= a + b) {
                e.css({position: "fixed", bottom: 0, top: "auto"});
            }
            if (a - d >= firstOffset) {
                e.css({position: "absolute", bottom: "auto", top: lastA});
            }
        } else { // scroll up
            if (a - d >= firstOffset) {
                if (e.css("position") != "fixed") {
                    e.css({position: "fixed", bottom: "auto", top: firstOffset});
                }
            } else {
                if (e.css("position") != "absolute") {
                    e.css({position: "absolute", bottom: "auto", top: lastA});
                }               
            }
        }
        lastScrollTop = d;
        lastA = a;
    });
}

fixMe("#stick");

Arbeitsbeispiel: https://jsfiddle.net/L7xoopst/6/

Es gibt ein relativ unbekanntes Plugin im Wordpress-Repository, das als WP Sticky Sidebar bekannt ist. Das Plugin macht genau das, was Sie wollten (Sticky Sidebar: Bleiben Sie beim Scrollen nach unten, beim Scrollen nach oben oben) WP Sticky Sidebar Wordpress-Repository Link: https://wordpress.org/plugins/mystickysidebar/