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/给出了不同的优点/缺点。

＆＃13;

$(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");
    }

});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: