gpt4 book ai didi

jQuery 滚动/跟随侧边栏 (div)

转载 作者:行者123 更新时间:2023-12-01 03:42:31 25 4
gpt4 key购买 nike

使用 jquery 技术实现滚动/跟随侧边栏 Help with Scroll/Follow Sidebar

$(function() {
var $sidebar = $(".sidebar"),
$window = $(window),
$footer = $(".footer"), // use your footer ID here
offset = $sidebar.offset(),
foffset = $footer.offset(),
threshold = foffset.top - $sidebar.height(), // may need to tweak
topPadding = 15;

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

唯一的问题是当侧边栏(.sidebar)到达页脚(.footer)时,它会将页脚向下推到接近页脚的高度。
如果页脚的高度为 200 像素,侧边栏会将页脚推至 ~200 像素(Internet Explorer)、~50 像素(Firefox、Chrome、Opera),然后显示页脚。
内容和页脚之间的 200 像素空白是我真正的问题。< br/>我希望侧边栏在页脚开始处停止滚动。

最佳答案

也许更简洁的代码:

$(function() {
var $sidebar = $("#sidebar"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

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

您可以将 400 更改为其他值,以更改动画的持续时间(将其设置为 0,让侧边栏“不”动画)。

关于jQuery 滚动/跟随侧边栏 (div),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18002101/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com