Sticky Div останавливается на дне - PullRequest
Новая
       13

Sticky Div останавливается на дне

2 голосов
/ 25 августа 2011

У меня есть липкий div, но мне нужно, чтобы он остановился в определенной точке внизу.Конечно, в примере (ссылка ниже) он никогда не достигает дна, но если у меня есть div с большей шириной, я хочу, чтобы он остановился до того, как он достигнет моего нижнего колонтитула.Дайте мне знать, если вы не поняли вопрос, помощь будет отличной.

http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

Ответы [ 3 ]

3 голосов
/ 30 августа 2011

Вот плагин jquery, который может решить эту проблему для вас.Этот плагин будет фиксировать элемент в верхней части страницы, как у вас в вашем примере;и, если вы установите необязательный предел для верхней части элемента, на котором вы хотите остановиться, он должен перемещаться вверх по странице при прокрутке.Вам нужно будет добавить высоту «фиксированного» элемента к пределу, чтобы он снова переместился вверх по странице, прежде чем он коснется элемента, к которому вы не хотите прикасаться, плюс некоторое поле, если хотите.

Вот скрипка, которая демонстрирует это: http://jsfiddle.net/ZczEt/2/

Вот плагин и его источник: https://github.com/bigspotteddog/ScrollToFixed

// the limit is optional, but it will make the header move up the
// page again once it reaches the 7th paragraph
$(document).ready(function() {
    $('.header').scrollToFixed( { limit: $($('h2')[7]).offset().top } );
});

Я забыл упомянуть, этот плагин также исправит эту заминку всодержимое под вашим липким заголовком, когда оно исправлено.В вашем примере, если вы прокрутите медленно, вы заметите, что содержимое переходит на высоту заголовка, когда становится фиксированным.Этот плагин компенсирует это.

0 голосов
/ 25 ноября 2013

Я использовал плагин jquery 

 https://github.com/garand/sticky

, чтобы остановиться снизу: 

 (function($) {

    var limit_bottom=$('#footer').height(); 
    $('.product-box').sticky({topSpacing:0, bottomSpacing:limit_bottom});
   })(jQuery);
0 голосов
/ 25 августа 2011

Это немного отклонение от примера, но я думаю, что это то, что вам нужно: 

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_bottomEdge = window_top + $('#sticky').outerHeight();
    var avoid_top = $('#avoidMe').offset().top;
    if (div_bottomEdge < avoid_top) $('#sticky').css('top', window_top);
}

$(document).ready(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

См. Этот пример jsFiddle для получения более подробной информации

...