高級jQuery粘貼側邊欄

Question

我正在使用（粘性）滾動側邊欄。 問題是大多數粘性側邊欄沒有考慮邊欄可能比視口高（例如，如果很多項目被添加到籃子（側邊欄））。 這就是我想要解決的問題。 這些是要求：

• 如果側邊欄的高度比視口高，則應滾動內容，並且當向下滾動時，div的底部應粘貼到視口的底部。

• 如果側邊欄的高度比視口高，則只有當您位於頁面底部時才會顯示下面的div。

• 當用戶向上滾動時，側邊欄會向后滾動到頂部並回到視口的頂部。

• 如果側邊欄的高度小於視口，則向下滾動時頂部應該是粘性的。

總而言之，相當一些功能而不是那么簡單（我認為）。 我見過的最接近我想要實現的是這個例子： http ： //demo.techbrij.com/730/fix-sidebar-scrolling-jquery.php但是編寫代碼的方式不合適進入我的。

到目前為止，這就是我所做的： DEMO

我使用的jQuery代碼：

jQuery(document).ready(function($) {

var $sidebar   = $('.sidebar'),
    $content   = $('.content');

if ($sidebar.length > 0 && $content.length > 0) {
    var $window    = $(window),
        offset     = $sidebar.offset(),
        timer;

    $window.scroll(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            if ($content.height() > $sidebar.height()) {
                var new_margin = $window.scrollTop() - offset.top;
                if ($window.scrollTop() > offset.top && ($sidebar.height()+new_margin) <= $content.height()) {
                    // Following the scroll...
                    $sidebar.stop().animate({ marginTop: new_margin });
                } else if (($sidebar.height()+new_margin) > $content.height()) {
                    // Reached the bottom...
                    $sidebar.stop().animate({ marginTop: $content.height()-$sidebar.height() });
                } else if ($window.scrollTop() <= offset.top) {
                    // Initial position...
                    $sidebar.stop().animate({ marginTop: 0 });
                }
            }
        }, 100); 
    });
}

});

Answer 1

你正在使用邊距來移動粘性側邊欄 - 我發現這是處理當前問題的一種棘手的方法（並且可能是更重的方式）。

一般來說，我喜歡簡單地在側邊欄中添加一個類，使其成為“position：fixed”，這樣瀏覽器就可以保持鎖定狀態。

對於您當前的問題，您只需要根據它們滾動的距離以編程方式滾動該位置固定div（也是100％高度）。 看看我的例子，看看這是否是你所追求的效果： http ： //jsfiddle.net/ZHP52/1/

這是jquery：

jQuery(document).ready(function($) {

var $sidebar   = $('.sidebar'),
    $content   = $('.content');

//Since our CSS is going to monkey with the height as you scroll, I need to know the initial height.
var sidebarHeight = $sidebar.height();

if ($sidebar.length > 0 && $content.length > 0) {
    var $window    = $(window),
        offset     = $sidebar.offset(),
        timer;

    $window.scroll(function() {

        if ($content.height() > sidebarHeight) {
            var new_margin = $window.scrollTop() - offset.top;
            if ($window.scrollTop() > offset.top) {
                // Fix sidebar
                $sidebar.addClass("fixed");
                // Scroll it the appropriate ammount
                $sidebar.scrollTop(new_margin);            
            }else{
                $sidebar.removeClass("fixed");
            }
        }
    });
}

});

Answer 2

我相信這是你正在尋找的功能： http ： //jsfiddle.net/JVe8T/7/

對不起凌亂的代碼，但優化它應該相當容易。 我還假設sidebar2（非粘性的）已經定義了高度，如果不是這種情況你可以用jquery檢測它並使用.css選擇器進行底部偏移。

這是我的代碼：

jQuery(document).ready(function() {

    var tmpWindow = $(window),
        sidebar = $('.sidebar'),
        content = $('.content'),
        sidebar1 = $('.sidebar1'),
        sidebar2 = $('.sidebar2'),
        viewportHeight = $(window).height(),
        sidebarHeight = sidebar.height(),
        sidebar1Height = sidebar1.height(),
        sidebar2Height = sidebar2.height(),
        offsetBottom;


    tmpWindow.scroll(function(){

        offsetBottom = content.height() - sidebar2Height;

        //if sidebar height is less that viewport
        if (viewportHeight > sidebarHeight) {
            sidebar.addClass('fixed');
        } 

        //sticky sidebar1
        if ((tmpWindow.scrollTop() + viewportHeight) > sidebar1Height ) {
            sidebar1.addClass('bottom');
        } else {
            sidebar1.removeClass('bottom');
        }

        //end of content, visible sidebar2
        if ((tmpWindow.scrollTop() + viewportHeight) > offsetBottom) {
            sidebar1.removeClass('bottom');
            sidebar1.addClass('fixedBottom');
        } else {
            sidebar1.removeClass('fixedBottom');
        }

    });

});

Answer 3

看看hcSticky，我只是在找這個。 它是一種“完美”的粘性側邊欄，也可以通過選項模擬其他庫。

第一個演示可能是每個人都需要的，它獨立於主要內容滾動容器。 （您可以在到達頁面底部之前瀏覽整個側邊欄，或者在到達頁面頂部之前向上滾動條形圖）。

看看： http ： //someweblog.com/demo/hcsticky/