Javascript 固定侧边栏滚动和停止在页脚

创建一个固定边栏，它停在父div的底部。我遇到的问题是，当固定边栏在滚动时立即开始，它应该开始并保持在标题的正下方约30px，然后当它到达底部时，它应该保持在父div的底部

现在，当你滚动到底部时，它会立即启动

你可以在这里看到我的笔：

jQuery：

$(window).scroll(function() {
  if ($(window).scrollTop() > 0) {
    $(".faqnav > div").css("position", "fixed");
    $(".faqnav > div").css("top", "");
  } else if ($(window).scrollTop() <= 0) {
    $(".faqnav > div").css("position", "");
    $(".faqnav > div").css("top", "");
  }
  if (
    $(".faqnav > div").offset().top + $(".faqnav > div").height() >
    $("#backup").offset().top
  ) {
    $(".faqnav > div").css(
      "top",
      -(
        $(".faqnav > div").offset().top +
        $(".faqnav > div").height() -
        $("#backup").offset().top
      )
    );
  }
});

$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>0）{
$（.faqnav>div”）.css（“位置”、“固定”）；
$（.faqnav>div”）.css（“顶部”、“顶部”）；
}else if（$（窗口）.scrollTop（）
$（“#备份”）.offset（）.top
) {
$（“.faqnav>div”）.css(
“顶级”，
-(
$（“.faqnav>div”）.offset（）.top+
$（“.faqnav>div”）.height（）-
$（“#备份”）.offset（）.top
)
);
}
});

我已经对您的代码做了一些修改，以便作为常见问题解答会话的侧栏将停留在滚动条标题下方

$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>150）{
$（.faqnav>div”）.css（“位置”、“固定”）；
$（.faqnav>div”）.css（“顶部”、“90px”）；
}else if（$（窗口）.scrollTop（）
$（“#备份”）.offset（）.top
) {
$（.faqnav>div”）.css（“位置”、“粘性”）；
}
});
.header{
宽度：100%；
高度：90px；
背景：#000；
位置：固定；
z指数：99999；
排名：0；
}
.土豆{
边缘顶部：150px；
}
.常见问题{
填充：90px；
垫底：15px；
}
.FAQ>div{
显示器：flex；
柔性包装：包装；
宽度：1200px；
保证金：自动；
}
.FAQ>div>div.FAQ导航{
宽度：25%；
}
.faqs>div>div.faqnav>div{
填充：0 30px 0 12px；
}
.FAQ>div>div.FAQ导航>div a{
显示：块；
填充：10px0；
位置：相对位置；
颜色：#999；
-webkit转换：所有0.25s线性；
-moz过渡：所有0.25s线性；
-ms转换：所有0.25s线性；
-o-过渡：所有0.25s线性；
过渡：所有0.25s线性；
}
.faqs>div>div.faqnav>div a.heyo{
颜色：#2880f8；
}
.FAQ>div>div.FAQ导航>div a:之前{
内容：“；
宽度：3倍；
高度：25px；
显示：内联块；
线高：45px；
位置：绝对位置；
背景：#999；
左：-10px；
}
.faqs>div>div.faqnav>diva.heyo:之前{
背景：#2880f8；
}
.faqs>div>div.faqnav>div a.heyo:焦点：之前{
}
.faqs>div>div.faqwrap{
宽度：75%；
}
p、 拨动{
颜色：#666；
光标：指针；
宽度：100%；
文本对齐：左对齐；
边界：无；
大纲：无；
过渡：0.4s；
利润率：0.10px；
}
p、 切换：之前{
内容：“\f105”；
字体系列：Fontsome；
右边距：10px；
显示：内联块；
字体大小：14px；
颜色：#2880f8；
排名：0；
位置：相对位置；
过渡：0.4s；
}
p、 激活{
颜色：#2880f8；
}
p、 切换。活动：之前{
内容：“\f107”；
}
.手风琴{
高度：500px；
}
.手风琴：焦点{
大纲：无；
}
.手风琴{
填充：0 20px 20px；
溢出：隐藏；
显示：无；
}
.手风琴，
.手风琴{
左侧填充：0；
}
.手风琴：第一个孩子{
背景：#fafafa；
边缘底部：20px；
}
.手风琴：第n个孩子（2）{
背景：#fafafa；
边缘底部：20px；
}
.手风琴：第n个孩子（3）{
背景：#fafafa；
}
.手风琴>div{
填充：50px；
}
.手风琴>第h3部分{
颜色：#666；
字体大小：粗体；
}
#备份{
背景：#000；
高度：800px；
宽度：100%；
}

导航
常见问题
一个
两个
三
您希望侧边栏保持在页眉下方还是可以更清晰一点？是的，保持在页眉下方30px；我对您的代码进行了一些修改，以修复标题下方的边栏。虽然边栏并没有停在底部，但当您到达底部时，它仍然会跳跃。@boloneysandwich我已更新了我的答案，您可以检查它。它将一直保持到faq会话处于活动状态，备份会话到来时，它将保持在faq会话上。我希望这就是你需要的。或者你需要侧边栏一直保留到页面的末尾，这意味着你也需要它作为备份div？