Jquery Sticky 사이드 바가 웹 사이트 하단에 붙지 않습니다.

Question

끈적 사이드 바는 초기 "elementpos"를 지나갈 때 작동합니다. 고정 된 위치로 이동하고 화면을 따라갑니다. div 바로 아래에있는 div의 바로 옆에있는 특정 지점으로 스크롤합니다. 나는 한 번 스크롤 된 절대 위치로 이동하기 위해 바닥 글 높이 + 픽셀 고정 된 양을 사용하려고했습니다. 웬일인지 내가 지나치고 싶은 점을 지나치면 움직이지 않는다.

JS 바이올린 : 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의 높이를 추가 한 당신이 시도 고정 된 상태로 복원된다. 또한 세 가지 수업이 각 조건에서 다루어 지도록했습니다.

다음은 클래스 스왑을 사용하지 않은 다른 피들입니다. 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>