Thanh bên dính: dính vào dưới cùng khi cuộn xuống, trên cùng khi cuộn lên

Question 1

Tôi đã tìm kiếm một giải pháp cho vấn đề thanh bên dính của tôi một thời gian. Tôi có một ý tưởng cụ thể về cách tôi muốn nó hoạt động; một cách hiệu quả, tôi muốn nó dính xuống dưới cùng khi bạn cuộn xuống, và ngay khi bạn cuộn lên, tôi muốn nó dính vào trên cùng, trong một chuyển động linh hoạt (không nhảy). Tôi không thể tìm thấy một ví dụ về những gì tôi đang cố gắng đạt được, vì vậy tôi đã tạo ra một hình ảnh mà tôi hy vọng sẽ minh họa cho điểm rõ ràng hơn:

Thanh bên nằm dưới tiêu đề.
Khi bạn cuộn xuống, thanh bên vẫn ngang bằng với nội dung của trang để bạn có thể cuộn qua cả thanh bên và nội dung.
Tiếp cận dưới cùng của thanh bên, thanh bên dính vào cuối khung nhìn (hầu hết các plugin chỉ cho phép dính lên trên, một số cho phép dính xuống dưới không cho phép cả hai).
Tiếp cận dưới cùng, thanh bên nằm phía trên chân trang.
Khi bạn cuộn lên, thanh bên vẫn ngang bằng với nội dung để bạn có thể cuộn lại qua nội dung và thanh bên.
Tiếp cận đầu thanh bên, thanh bên dính vào đầu khung nhìn.
Tiếp cận trên cùng và thanh bên nằm trở lại bên dưới tiêu đề.

Tôi hy vọng đây là đủ thông tin. Tôi đã tạo jsfiddle để kiểm tra bất kỳ plugin / tập lệnh nào mà tôi đã đặt lại cho câu hỏi này: http://jsfiddle.net/jslucas/yr9gV/2/ .

Question 2

+1 cho hình ảnh rất đẹp và bắt mắt.

Tôi biết đó là một câu hỏi cũ, nhưng tôi tình cờ tìm thấy câu hỏi tương tự do bạn đăng trên forum.jquery.com và một câu trả lời ở đó ^{(bởi @ tucker973)} , đề xuất một thư viện tuyệt vời để làm điều này và muốn chia sẻ nó ở đây.

Nó có tên là stick -kit của @leafo

github proyect
trang web
ví dụ đơn giản trong jsFiddle ^{(mã giống như đoạn mã đính kèm ở đây)}

Ở đây bạn có mã của một ví dụ rất cơ bản mà tôi đã chuẩn bị và một bản demo đang hoạt động để xem kết quả.

Hiển thị đoạn mã

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

Mở rộng đoạn mã

Tất nhiên, tất cả các khoản tín dụng đều thuộc về người tạo plugin, tôi chỉ làm ví dụ này để hiển thị ở đây. Tôi cần đạt được kết quả tương tự như bạn đã làm và thấy plugin này rất hữu ích.

Question 3

Cảm ơn vì đồ họa tuyệt vời. Tôi cũng đang tìm giải pháp cho thách thức này!

Thật không may, câu trả lời khác được đăng ở đây không giải quyết yêu cầu số 5 quy định khả năng cuộn lại qua thanh bên một cách trơn tru.

Tôi đã tạo một fiddle thực hiện tất cả các yêu cầu: http://jsfiddle.net/bN4qu/5/

Logic cốt lõi cần được thực hiện là:

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

Trong fiddle, tôi sử dụng biến đổi CSS3 để di chuyển phần tử mục tiêu xung quanh, vì vậy nó sẽ không hoạt động trong ví dụ: IE <9. Tuy nhiên, logic là hợp lý khi sử dụng một cách tiếp cận khác.

Ngoài ra, tôi đã sửa đổi fiddle của bạn để thanh bên dính có nền gradient. Điều này giúp cho thấy rằng hành vi phù hợp đang được trưng bày.

Tôi hy vọng điều này hữu ích cho ai đó!

Question 4

Dưới đây là một ví dụ về cách triển khai điều này:

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/

Điều này hoạt động như mong đợi trong tất cả các tình huống và cũng được hỗ trợ tốt trong IE.

Question 5

Tôi đã tìm kiếm điều tương tự. Rõ ràng tôi cần tìm kiếm một số thuật ngữ khó hiểu chỉ để tìm một câu hỏi tương tự với hình ảnh. Hóa ra đó chính xác là những gì tôi đang tìm kiếm. Tôi không thể tìm thấy bất kỳ plugin nào nên tôi quyết định tự tạo. Hy vọng rằng ai đó sẽ nhìn thấy điều này và tinh chỉnh nó.

Đây là một html mẫu nhanh và bẩn mà tôi đang sử dụng.

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

Đây là jQuery tôi đã tạo:

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

    });
}

Một số lưu ý:

.rectbtfad là phần tử dưới cùng nhất trong thanh bên của tôi
Tôi đang sử dụng chiều cao của #masthead vì đó là tiêu đề cố định nên cần bù đắp cho nó
Có một kiểm tra cho phao col-2 vì tôi đang sử dụng thiết kế đáp ứng và không muốn điều này kích hoạt trên màn hình nhỏ hơn

Nếu ai đó có thể tinh chỉnh điều này hơn một chút thì sẽ rất tuyệt.

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

Ví dụ làm việc: https://jsfiddle.net/L7xoopst/6/

Question 7

Có một plugin tương đối không được biết đến trong kho Wordpress được gọi là WP Sticky Sidebar. Plugin thực hiện chính xác những gì bạn muốn (Sticky sidebar: dính vào dưới cùng khi cuộn xuống, trên cùng khi cuộn lên) Liên kết kho lưu trữ WP Sticky Sidebar Wordpress: https://wordpress.org/plugins/mystickysidebar/