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

Question

当我滚动过去最初的“elementpos”时，我的粘性侧边栏工作，它进入一个固定位置并跟随屏幕，我想要它做的就是贴在它旁边的 div 底部旁边一次我滚动到某个点。我尝试使用页脚高度 + 固定数量的像素，以便在滚动到该点后使其进入绝对位置。出于某种原因，一旦我滚动到我希望它去的点，它就不起作用了。

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条件只需要考虑顶部和底部，所以我将窗口高度添加到滚动位置并添加蓝色div的高度来计算它的底部位置，让红色div恢复到其固定状态。并确保在每种情况下都解决了所有三个类。

这是一个没有类交换的不同小提琴：https://jsfiddle.net/manoeuvres/p7o265nr/ 它提供了不同的优点/缺点。

$(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>