Липка бічна панель: дотримуйтесь нижньої частини при прокручуванні вниз, верхньої при прокручуванні вгору

Question 1

Я вже деякий час шукаю рішення моєї проблеми з липкою бічною панеллю. Я конкретно уявляю, як би я хотів, щоб це діяло; фактично, я хотів би, щоб він прилипав до низу, коли ви прокручуєте вниз, а потім, як тільки ви прокручуєте назад, я хотів би, щоб він прилипав до верху, плавним рухом (без стрибків). Я не можу знайти приклад того, чого намагаюся досягти, тому створив образ, який, сподіваюся, проілюструє суть чіткіше:

Бічна панель розташована під заголовком.
Під час прокрутки бічної панелі вниз рівень вмісту сторінки залишається рівним, щоб ви могли прокручувати як бічну панель, так і вміст.
Дойдіть до нижньої частини бічної панелі, бокова панель прилипає до нижньої частини області перегляду (більшість плагінів дозволяють притримуватися лише доверху, деякі, що дозволяють дотримуватися нижньої частини, не дозволяють обидва).
Дойдіть до нижньої частини, бічна панель розташована над колонтитулом.
Під час прокрутки назад бічна панель залишається на рівні з вмістом, тому ви можете прокрутити вміст і бічну панель знову.
Дойдіть до верхньої частини бічної панелі, бічна панель прилипає до верхньої частини області перегляду.
Дістаньтеся до верхньої частини, і бічна панель розташується назад під заголовком.

Сподіваюся, цього достатньо інформації. Я створив jsfiddle для тестування будь-яких плагінів / сценаріїв, які я скинув для цього питання: http://jsfiddle.net/jslucas/yr9gV/2/ .

Question 2

+1 до дуже приємного та ілюстративного зображення.

Я знаю, що це старе запитання, але випадково я знайшов те саме запитання, опубліковане вами на forum.jquery.com, і одну відповідь там ^{(@ tucker973)} , запропонував зробити одну приємну бібліотеку і хотів поділитися ним тут.

Це називається липким набором по @leafo

проект github
веб-сторінка
простий приклад у jsFiddle ^{(той самий код, що і доданий сюди фрагмент)}

Тут у вас є код дуже базового прикладу, який я підготував, і робоча демонстрація, щоб побачити результат.

Показати фрагмент коду

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

Розгорніть фрагмент

Звичайно, всі кредити дістаються творцю плагіна, я лише зробив цей приклад, щоб показати його тут. Мені потрібно досягти того самого результату, що й після вас, і цей плагін виявився дуже корисним.

Question 3

Дякую за чудову графіку. Я також шукав рішення цього виклику!

На жаль, інша відповідь, розміщена тут, не стосується вимоги №5, яка передбачає можливість плавного прокручування назад через бічну панель.

Я створив скрипку, яка реалізує всі вимоги: http://jsfiddle.net/bN4qu/5/

Основною логікою, яку потрібно впровадити, є:

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

У скрипці я використовую перетворення CSS3 для переміщення цільового елемента, тому воно не буде працювати, наприклад, IE <9. Але логіка обґрунтована для використання іншого підходу.

Крім того, я змінив вашу скрипку, щоб липка бічна панель мала градієнтний фон. Це допомагає показати, що демонструється правильна поведінка.

Сподіваюся, це комусь корисно!

Question 4

Ось приклад того, як це реалізувати:

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%;
}

Демо: http://jsfiddle.net/ryanmaxwell/25QaE/

Це працює, як очікувалось, у всіх сценаріях і добре підтримується в IE.

Question 5

Я шукав саме те саме. Очевидно, мені потрібно було шукати деякі незрозумілі терміни, щоб просто знайти подібне питання з графікою. Виявляється, це саме те, що я шукав. Я не зміг знайти жодного плагіна, тому вирішив зробити його сам. Сподіваємось, хтось це побачить і вдосконалить.

Ось швидкий і брудний зразок html, який я використовую.

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

Ось 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();

    });
}

Деякі примітки:

.rectbtfad - це самий нижній елемент на моїй бічній панелі
Я використовую висоту свого #masthead, тому що це липкий заголовок, тому його потрібно компенсувати
Існує перевірка на flo-2 float, оскільки я використовую адаптивний дизайн і не хочу, щоб це активувалося на менших екранах

Якщо хтось може вдосконалити це трохи більше, це було б чудово.

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

Робочий приклад: https://jsfiddle.net/L7xoopst/6/

Question 7

У сховищі Wordpress є відносно невідомий плагін, відомий як WP Sticky Sidebar. Плагін робить саме те, що ви хотіли (липка бічна панель: дотримуйтесь знизу при прокрутці вниз, зверху при прокрутці вгору) WP Sticky Sidebar репозиторій Wordpress Посилання: https://wordpress.org/plugins/mystickysidebar/