Jqueryスティッキーサイドバーがウェブサイトの底にくっつかない

Question

スティッキーサイドバーは、最初の「elementpos」をスクロールすると機能し、固定位置に移動して画面をたどります。ある点までスクロールすると、divのすぐ隣の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

赤のdivを可能にするために、条件はただトップスとボトムスを考慮することが必要であれば、私はその下の位置を計算するためのスクロール位置にウィンドウの高さを追加し、青のdivの高さを追加しているあなた、これを試してみてくださいその固定状態に復元される。また、3つのクラスがそれぞれの条件で対処されていることを確認しました。

ここでは、クラススワップなしの別のフィドルです：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>