Я работаю над (липкой) боковой панелью прокрутки. Проблема в том, что большинство липких боковых панелей не учитывают, что боковая панель может быть выше, чем область просмотра (например, если в корзину (боковая панель) добавлено много элементов). Это то, что я пытаюсь решить. Это следующие требования:
-
Если высота боковой панели выше, чем в окне просмотра, она должна прокрутите содержимое, а нижняя часть div должна придерживаться нижней части окна просмотра при прокрутке вниз.
-
Если высота боковой панели выше, чем область просмотра, divs внизу должны отображаться только в том случае, если вы находитесь внизу стр.
-
Когда пользователь выполняет прокрутку назад, боковая панель прокручивается назад и вернется в верхнюю часть окна просмотра.
-
Если высота боковой панели меньше области просмотра, она должна быть липкий сверху вниз при прокрутке вниз.
Итак, все в целом довольно функционально и не так просто (я думаю). Самый близкий, который я видел к тому, чего я пытаюсь достичь, - это пример: http://demo.techbrij.com/730/fix-sidebar-scrolling-jquery.php, но способ написания кода не подходит мне.
До сих пор это то, что я сделал: DEMO
И код jQuery, который я использовал:
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);
});
}
});
