Скляна відстань прокрутки бічної панелі та нескінченна прокрутка - javascript, jquery, sticky

У мене є бічна панель, яка прокручується разом із сторінкою.Однак бічна панель, схоже, відстає від прокрутки сторінки, напр. прокрутіть вниз і через кілька секунд з’явиться бічна панель. Крім того, бічна панель буде продовжувати опускатися, роблячи сторінку довшою, а нижній колонтитул стане недоступним. Що мені потрібно зробити, щоб бічна панель рухалася за допомогою прокрутки, а бічна панель припинила рух у нижньому колонтитулі? Ось мій код jQuery:

            $(function() {

var $sidebar   = $("aside"),
$window    = $(window),
offset     = $sidebar.offset(),
topPadding = 50;

$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});

Приклад можна побачити на http://meddiary.com/plans-pricing/. Виправлення коду вітається, але найкраще вказати мене в правильному напрямку.

Відповіді:

Спробуйте вирішити це за допомогою чистого CSS:

.affix {
position: fixed;
}

Або ви можете використовувати існуючий плагін jQuery, такий як цей: http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

Ось як я виправив свою проблему:

            if ($(window).width() > 767) {

var $sidebar   = $("aside"),
$window    = $(window),
offset     = $sidebar.offset(),
topPadding = 50;

$window.scroll(function() {
if($window.scrollTop() > $("h3").offset().top) {
$sidebar.stop().css("marginTop", "680px");
} else if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
}, 100, function() {
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

};

if ($(window).width() > 767) частина утримує бічну панель від прокрутки, якщо область перегляду ширша за 767px. if($window.scrollTop() > $("h3").offset().top) { $sidebar.stop().css("marginTop", "680px"); } частина призначена для того, коли верхня частина області перегляду потрапляє на потрібний елемент, h3, прокрутка зупиняється. Ця частина повинна бути першою, оскільки else if твердження завжди відповідає дійсності! Потім я просто скоротив час анімації, щоб зупинити відставання.