Yapışkan kenar çubuğu: aşağı kaydırırken en alta, yukarı kaydırırken yukarı yap

Question 1

Yapışkan kenar çubuğu sorunuma bir çözüm bulmak için bir süredir arıyordum. Nasıl davranmasını istediğime dair belirli bir fikrim var; Etkili bir şekilde, aşağı kaydırdığınızda aşağıya yapışmasını istiyorum ve sonra yukarı kaydırdığınız anda akıcı bir hareketle (zıplamadan) yukarıya yapışmasını istiyorum. Neyi başarmaya çalıştığıma dair bir örnek bulamıyorum, bu yüzden konuyu daha net göstereceğini umduğum bir görüntü yarattım:

Kenar çubuğu başlığın altında bulunur.
Siz aşağı kaydırdıkça kenar çubuğu sayfanın içeriği ile aynı seviyede kalır, böylece hem kenar çubuğunda hem de içerikte gezinebilirsiniz.
Kenar çubuğunun alt kısmına ulaşın, kenar çubuğu görüntü alanının altına yapışır (çoğu eklenti yalnızca üste yapışmaya izin verir, bazıları aşağıya yapışmaya izin verenler her ikisine de izin vermez).
Alta ulaşın, kenar çubuğu altbilginin üzerinde oturur.
Siz yukarı kaydırdıkça, kenar çubuğu içerikle aynı seviyede kalır, böylece içerikte ve kenar çubuğunda tekrar kaydırabilirsiniz.
Kenar çubuğunun üst kısmına ulaşınca, kenar çubuğu görünüm alanının üstüne yapışır.
En üste ulaşın ve kenar çubuğu başlığın altına geri oturur.

Umarım bu yeterli bilgidir. Bu soru için sıfırladığım eklentileri / komut dosyalarını test etmek için bir jsfiddle oluşturdum: http://jsfiddle.net/jslucas/yr9gV/2/ .

Question 2

Çok güzel ve gösterişli bir görüntüye +1 .

Bunun eski bir soru olduğunu biliyorum, ancak sizin tarafınızdan forum.jquery.com'da yayınlanan aynı soruyu ve orada ^{(@ tucker973 tarafından)} bir yanıt ^buldum , bunu yapmak için güzel bir kitaplık ^önerdim ve burada paylaşmak istedim.

Bu denir yapışkan kiti ile @leafo

github projeksiyonu
internet sayfası
jsFiddle'daki basit örnek ^{(buraya eklenen snippet ile aynı kod)}

Burada hazırladığım çok basit bir örneğin kodu ve sonucu görmek için çalışan bir demo var.

Kod parçacığını göster

/*!
 * 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>

Snippet'i genişlet

Tabii ki, tüm krediler eklentinin yaratıcısına gidiyor, ben sadece bu örneği burada göstermek için yaptım. Senin peşinde olduğun sonucu elde etmem gerekiyor ve bu eklentiyi çok kullanışlı buldum.

Question 3

Harika grafik için teşekkürler. Ben de bu zorluğa bir çözüm arıyordum!

Maalesef, burada yayınlanan diğer cevap, kenar çubuğunda sorunsuz bir şekilde geri dönme yeteneğini şart koşan 5 numaralı gereksinimi ele almıyor.

Tüm gereksinimleri yerine getiren bir keman oluşturdum: http://jsfiddle.net/bN4qu/5/

Uygulanması gereken temel mantık şudur:

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

Keman içinde hedef elemanı hareket ettirmek için CSS3 dönüşümü kullanıyorum, bu yüzden örneğin IE <9'da çalışmayacak. Mantık, ancak farklı bir yaklaşım kullanmak için sağlamdır.

Ayrıca, yapışkan kenar çubuğunun gradyan arka planı olacak şekilde kemanınızı değiştirdim. Bu, doğru davranışın sergilendiğini göstermeye yardımcı olur.

Umarım bu birisi için yararlıdır!

Question 4

İşte bunun nasıl uygulanacağına dair bir örnek:

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/25ultyE/

Bu, tüm senaryolarda beklendiği gibi çalışır ve IE'de de iyi desteklenir.

Question 5

Ben de aynı şeyi arıyordum. Görünüşe göre, sadece grafikle benzer bir soru bulmak için bazı belirsiz terimleri aramam gerekiyordu. Tam olarak aradığım şey olduğu ortaya çıktı. Herhangi bir eklenti bulamadığım için kendim yapmaya karar verdim. Umarım birisi bunu görür ve iyileştirir.

İşte kullandığım hızlı ve kirli bir html örneği.

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

İşte yaptığım jQuery:

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();

    });
}

Bazı notlar:

.rectbtfad, kenar çubuğumdaki en alttaki öğe
# Masthead'imin yüksekliğini kullanıyorum çünkü bu yapışkan bir başlık, dolayısıyla telafi etmesi gerekiyor
Duyarlı bir tasarım kullandığım ve bunun daha küçük ekranlarda etkinleştirilmesini istemediğim için col-2 float için bir kontrol var

Bunu biraz daha rafine edebilen biri varsa bu harika olur.

Question 6

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");

Çalışma Örneği: https://jsfiddle.net/L7xoopst/6/

Question 7

Wordpress deposunda WP Sticky Sidebar olarak bilinen nispeten bilinmeyen bir eklenti var. Eklenti tam olarak istediğiniz şeyi yapar (Yapışkan kenar çubuğu: aşağı kaydırırken aşağıya, yukarı kaydırırken yukarı yapıştır) WP Sticky Kenar Çubuğu Wordpress deposu Bağlantısı: https://wordpress.org/plugins/mystickysidebar/