Thanh bên jQuery nâng cao

Question

Tôi đang làm việc trên thanh bên cuộn (dính). Vấn đề là hầu hết các thanh bên dính đều không xem xét rằng thanh bên có thể cao hơn khung nhìn (ví dụ: nếu nhiều mục được thêm vào rổ (thanh bên)). Đó là những gì tôi đang cố gắng giải quyết. Đây là những yêu cầu:

• Nếu chiều cao của thanh bên là cao thì khung nhìn, cần cuộn qua các nội dung và đáy của div nên dính vào dưới cùng của khung nhìn khi di chuyển xa hơn xuống .

• Nếu chiều cao của thanh bên cao hơn thì chế độ xem, các div bên dưới chỉ được hiển thị khi bạn ở cuối trang .

• Khi người dùng cuộn trở lại, thanh bên cuộn trở lại đầu trang và đưa trở lại lên đầu chế độ xem.

• Nếu chiều cao của thanh bên ít hơn thì chế độ xem, cần phải là dính từ trên cùng khi cuộn xuống.

Vì vậy, tất cả trong tất cả một số chức năng khá và không đơn giản (tôi nghĩ). Gần nhất tôi đã nhìn thấy những gì tôi đang cố gắng đạt được là ví dụ này: http://demo.techbrij.com/730/fix-sidebar-scrolling-jquery.php nhưng cách mã được viết không phù hợp với tôi.

Cho đến nay, đây là những gì tôi đã thực hiện: DEMO

Và mã jQuery tôi đã sử dụng:

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

Bạn đang sử dụng lợi nhuận để di chuyển thanh bên dính xung quanh - Tôi đã thấy điều này là một cách khôn lanh để xử lý yêu cầu hiện tại của bạn (và có khả năng là một cách nặng hơn).

Nói chung, tôi chỉ muốn thêm một lớp vào thanh bên làm cho nó trở thành "vị trí: cố định" để trình duyệt thực hiện việc nâng hạng nặng khi giữ nó khóa.

Đối với yêu cầu hiện tại của bạn, bạn chỉ cần di chuyển vị trí đó cố định div (cũng được thực hiện 100% chiều cao) theo chương trình dựa trên mức độ mà chúng đã cuộn xuống. Hãy xem ví dụ của tôi và xem nếu điều này là hiệu ứng bạn đang sau: http://jsfiddle.net/ZHP52/1/

đây là 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

I belive đây là chức năng mà bạn đang tìm kiếm: http://jsfiddle.net/JVe8T/7/

Xin lỗi vì mã lộn xộn nhưng nó sẽ khá dễ dàng để tối ưu hóa nó. Tôi cũng giả định rằng sidebar2 (không dính) đã xác định chiều cao, nếu đó không phải là trường hợp bạn chỉ có thể phát hiện nó với jquery và sử dụng .css chọn cho bù đắp dưới.

Dưới đây là mã của tôi:

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

Check-out hcSticky, tôi chỉ tìm kiếm này. Đó là loại thanh bên "hoàn hảo" và cũng có thể mô phỏng các thư viện khác với các tùy chọn.

Bản trình diễn đầu tiên có lẽ là những gì mọi người cần, nó cuộn một vùng chứa độc lập với nội dung chính. (bạn có thể đi qua toàn bộ thanh bên trước khi đến cuối trang hoặc khi bạn cuộn thanh lên, trước khi đến đầu trang).

Hãy khám phá: http://someweblog.com/demo/hcsticky/