Боковая панель, которая следует за прокруткой, но прокручивает себя, если она выше, чем область просмотра

Ответ 1

У меня была эта точная идея для проекта, вот пример того, как его реализовать

http://jsfiddle.net/ryanmaxwell/25QaE/

Ответ 2

Поведение, которое вы хотели бы достичь, называется "affix". Twitter. Интерфейс front-end Bootstrap имеет компонент javascript, который может делать то, что вы хотели бы получить. Пожалуйста, просмотрите раздел о компоненте аффикса. Фактически, там вы также можете увидеть демонстрацию желаемого поведения, прикреплено меню в левой боковой панели.

Вы можете определить функции для параметра смещения инициации инициализации аффикса, чтобы он мог динамически определяться, когда вывести/отменить элемент. Чтобы увидеть пример в контексте, проверьте источник вышеуказанной связанной страницы, особенно посмотрите application.js, он содержит настройку аффикса, которую вы можете увидеть с левой стороны. Здесь вы можете увидеть код init, полученный из контекста:

// side bar
$('.bs-docs-sidenav').affix({
  offset: {
    top: function () { return $window.width() <= 980 ? 290 : 210 }
  , bottom: 270
  }
})

Вероятно, также стоит проверить в источниках страницы таблицу стилей docs.css, которая содержит некоторое позиционирование и стиль для прикрепленного элемента. Проверка этого может решить вашу проблему или, по крайней мере, может дать вам и идею.

Ответ 3

Поскольку ни один из этих примеров не подходил мне хорошо, я сделал это, и мне нравится делиться:

JS

$(function () {
    var element = $('.right-container');
    var originalY = element.offset().top;
    var lastOffset = $(document).scrollTop();
    var diffToBottom = element.height() - $(window).height();

    $(window).on('scroll', function (event) {
        var scrollTop = $(window).scrollTop();        
        var currentOffset = $(document).scrollTop();
        var isScrollingDown = currentOffset > lastOffset;

        if (scrollTop > (diffToBottom + element.height())) {
            if (!element.hasClass('relative')) {
                element.css('top', scrollTop - (originalY + diffToBottom) + 'px');
                element.addClass('relative');
            }

            if (isScrollingDown) {
                var newTop = scrollTop < lastOffset ? 0 : scrollTop - (originalY + diffToBottom);
            }
            else if (scrollTop < element.offset().top) {
                var newTop = scrollTop - (originalY);
            }

            element.stop(false, false).animate({
                top: newTop
            }, 300);
        }
        else {
            if (scrollTop < originalY) {
                element.removeClass('relative');
            }

            element.stop(false, false).animate({
                top: scrollTop - (originalY)
            }, 300);
        }

        lastOffset = currentOffset;
    });
});

CSS

.relative {
    position: relative;
}

Он плавно прокручивается, когда элемент попадает в нижнюю часть и прокручивается вверх, когда топ попадает.

Ответ 4

Что-то вроде этого может работать. Я не тестировал его, но теоретически он выглядит хорошо.

$(function(){
    var standardPosition = $('whatYouWantToScroll').offset().top;
    // Cache the standard position of the scrolling element
    $(window).scroll(function() {
        if ($(this).scrollTop() < standardPosition) {
            // if scroll pos is higher than the top of the element
            $('whatYouWantToScroll').css({
                position: 'relative',
                top: '0px'
            });
        } else if ($(window).scrollTop() > $('somethingToReferenceOnTheBottom').offset().top-($('whatYouWantToScroll').height())) {
            // if scroll position is lower than the top offset of the bottom reference
            // + the element that is scrolling height
            $('whatYouWantToScroll').css({
                position: 'absolute',
                top: $('somethingToReferenceOnTheBottom').offset().top-($('whatYouWantToScroll').height())
            });
        } else {
            // otherwise we're somewhere inbetween, fixed scrolling.
            $('whatYouWantToScroll').css({
                position: 'fixed'
            });
        }
    });
});

Ответ 5

Мне нужна эта точная функциональность для сайта, и это то, с чем я столкнулся, кажется, работает очень хорошо... Я знаю, что этот пост старый, но я предполагаю, что некоторые люди могут заинтересоваться этим в любом случае; )

(function($){
    $(document).ready(function(){
    sidebar_offset=$('#header').height()+10;
    $(window).scroll(function(){
        var sidebar=$('#primary');
    if($(this).scrollTop()<sidebar_offset){
        var height=$(window).height()-(sidebar_offset-$(this).scrollTop());
        css={height:height,marginTop:0};
        sidebar[0].scrollTop=0;
    }else{
        css.height=$(this).height();
        if($(this).scrollTop()>sidebar_offset){
            if(this.lastTop>$(this).scrollTop()){
                sidebar[0].scrollTop=sidebar[0].scrollTop-(this.lastTop-$(this).scrollTop());
            }else{
                sidebar[0].scrollTop=sidebar[0].scrollTop+($(this).scrollTop()-this.lastTop);
            }

            css.marginTop=($(this).scrollTop()-sidebar_offset)+'px';
        }else{
            sidebar[0].scrollTop=0;
        }
     }
     sidebar.css(css);
     this.lastTop=$(this).scrollTop();
    });
})(jQuery);

Ответ 6

Вы также попросили примеры; Одним из примеров, с которым я встречаюсь регулярно, является правая колонка объявлений в Facebook. Он выше, чем область просмотра, и прокручивает первое или второе объявление и останавливается на третьем. Я считаю, что это определяется расположением третьего объявления, а не общей высотой боковой панели, но это рабочий пример.

http://facebook.com

screenhots: http://i.imgur.com/dM3OZ.jpg/вверху страницы http://i.imgur.com/SxEZO.jpg/далее вниз