javascript - 固定侧边栏滚动和停在页脚

Question

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

现在，它会在您滚动时立即启动，然后在到达底部时启动。

你可以在这里看到我的笔:https://codepen.io/chuckers82/pen/mdbvZYR

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
      )
    );
  }
});

Answer 1

我对您的代码做了一些修改，以便 Faq session 的侧边栏在滚动时保持在标题下方

$(window).scroll(function() {
  if ($(window).scrollTop() > 150) {
    $(".faqnav > div").css("position", "fixed");
    $(".faqnav > div").css("top", "90px");
  } 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("position", "sticky");
  }
});

.header {
  width: 100%;
  height: 90px;
  background: #000;
  position: fixed;
  z-index: 99999;
  top: 0;
}
.spud {
  margin-top: 150px;
}
.faqs {
  padding: 90px;
      Padding-bottom: 15px;
}
.faqs > div {
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
  margin: auto;
}
.faqs > div > div.faqnav {
  width: 25%;
}
.faqs > div > div.faqnav > div {
  padding: 0 30px 0 12px;
}
.faqs > div > div.faqnav > div a {
  display: block;
  padding: 10px 0;
  position: relative;
  color: #999;
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear;
  -ms-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
.faqs > div > div.faqnav > div a.heyo {
  color: #2880f8;
}
.faqs > div > div.faqnav > div a:before {
  content: "";
  width: 3px;
  height: 25px;
  display: inline-block;
  line-height: 45px;
  position: absolute;
  background: #999;
  left: -10px;
}
.faqs > div > div.faqnav > div a.heyo:before {
  background: #2880f8;
}
.faqs > div > div.faqnav > div a.heyo:focus:before {
}
.faqs > div > div.faqwrap {
  width: 75%;
}
p.toggle {
  color: #666;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  margin: 0 0 10px;
}
p.toggle:before {
  content: "\f105";
  font-family: FontAwesome;
  margin-right: 10px;
  display: inline-block;
  font-size: 14px;
  color: #2880f8;
  top: 0;
  position: relative;
  transition: 0.4s;
}
p.toggle.active {
  color: #2880f8;
}
p.toggle.active:before {
  content: "\f107";
}
.accordion {
  height: 500px;
}
.accordion:focus {
  outline: none;
}
.accordion .inner {
  padding: 0 20px 20px;
  overflow: hidden;
  display: none;
}
.accordion .inner ol,
.accordion .inner ul {
  padding-left: 0;
}
.accordion:first-child {
  background: #fafafa;
  margin-bottom: 20px;
}
.accordion:nth-child(2) {
  background: #fafafa;
  margin-bottom: 20px;
}
.accordion:nth-child(3) {
  background: #fafafa;
}
.accordion > div {
  padding: 50px;
}
.accordion > div h3 {
  color: #666;
  font-weight: bold;
}
#backup {
  background: #000;
  height: 800px;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<header class="header">NAV</header>
<section class="spud">
  <h1>FAQs</h1>
</section>
<section class="faqs">
  <div>
    <div class="faqnav">
      <div>
        <a href="#one" class="heyo">One</a>
        <a href="#two">Two</a>
        <a href="#three">Three</a>
      </div>
    </div>
    <div class="faqwrap">
      <div class="accordion" id="one">
        <div>
          <h3>One </h3>
        </div>
      </div>
      <div class="accordion" id="two">
        <div>
          <h3>Two</h3>
        </div>
      </div>
      <div class="accordion" id="three">
        <div>
          <h3>Three</h3>
        </div>
      </div>
    </div>
  </div>

</section>
<div id="backup"></div>