Jquery 粘性侧边栏不会粘在网站底部

Question

当我滚动到初始 "elementpos" 时，我的粘性侧边栏会工作，它会进入固定位置并跟随屏幕，我想要它做的是粘在 [= 底部旁边20=] 一旦我滚动到某个点就在它旁边。我尝试使用页脚高度 + 固定数量的像素，以便在滚动到该点后使其进入绝对位置。出于某种原因，一旦我滚动到我希望它到达的位置，它就无法正常工作。

JS FIDDLE: https://jsfiddle.net/j05t35ax/2/

这是我的 jquery 脚本。

$(document).scroll(function() {
    var scrollpos = $(window).scrollTop();
    var elementpos = $('.textbody-aa').offset().top;
    var boxesoffsetbottom = $('.boxes-buttons').offset().top + (494);
    var footerheight = $('.footer').offset().top + (-25);

    if (scrollpos >= elementpos) {
        $(".boxes-buttons").addClass("fixed")
        $(".boxes-buttons").removeClass("static")
    }

    else if (boxesoffsetbottom >= footerheight) {
        $(".boxes-buttons").addClass("staticbottom")
        $(".boxes-buttons").removeClass("fixed")
        $(".boxes-buttons").removeClass("static")
    }

    else {
        $(".boxes-buttons").removeClass("staticbottom")
        $(".boxes-buttons").removeClass("fixed")
        $(".boxes-buttons").addClass("static")
    }

});

    .fixed {
  position: fixed;
  right: 0px;
  top: 0px;
}

.static {
  position: static;
}

.staticbottom {
  position: absolute;
  bottom: 145px;

}

Answer 1

试试这个，你的if条件只需要考虑顶部和底部，所以我在滚动位置添加了window高度，并添加了蓝色div的高度来计算它底部位置，以允许红色 div 恢复到其固定状态。并且还确保所有三个 classes 在每个条件下都得到解决。

这是一个不同的 fiddle，没有 class 交换：https://jsfiddle.net/manoeuvres/p7o265nr/ 给出了不同的 advantages/disadvantages.

$(document).scroll(function() {
    var scrollpos = $(window).scrollTop();
    var winHeight = $(window).height();
    var elementpos = $('.textbody-aa').offset().top;
    var elementHeight = $('.textbody-aa').height();
    var boxesoffsetbottom = $('.boxes-buttons').offset().top + (340);
    var footerheight = $('.footer').offset().top - (50);

    if (scrollpos >= elementpos && (scrollpos+winHeight) < (elementHeight+50)) {
        $(".boxes-buttons").addClass("fixed");
        $(".boxes-buttons").removeClass("static");
        $(".boxes-buttons").removeClass("staticbottom");
    } else if (boxesoffsetbottom >= footerheight ) {
        $(".boxes-buttons").addClass("staticbottom");
        $(".boxes-buttons").removeClass("fixed");
        $(".boxes-buttons").removeClass("static");
    } else {
        $(".boxes-buttons").removeClass("staticbottom");
        $(".boxes-buttons").removeClass("fixed");
        $(".boxes-buttons").addClass("static");
    }

});

.footer{
  display:block;
  bottom:0px;
  width: 100%;
  height: 200px;
  background-color: pink;
}

.textbody-aa{
  margin-bottom: 50px;
  margin-top: 50px;
  height: 1000px;
  width:150px;
  background-color: #123d80;
}

.boxes-buttons{
  height: 340px;
  width:150px;
  background-color: red;
  position: absolute;
  right:50px;
  top: 50px;
}

.fixed{
  position: fixed;
}

.static{
  position: absolute;
  right:50px;
  top: 50px;
}

.staticbottom{
  position: absolute;
  right:50px;
  top: 710px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="textbody-aa">
Please stop at the bottom and the top
</div>
<div class ="boxes-buttons">
no
</div>

<footer class="footer">come here</footer>

Jquery 粘性侧边栏不会粘在网站底部

Jquery Sticky side bar won't stick to bottom of website

jquery

scroll

sidebar

sticky