풋터 웨이 포인트와 오버랩되는 끈적한 사이드 바를 멈추기

Question

여러 개의 링크가있는 사이드 탐색 바가있는 앱이 있습니다. 사용자가 페이지를 아래로 스크롤 할 때 사이드 탐색이 고정되도록하려면 JQuery 웨이 포인트를 사용하고 있습니다. 링크가 페이지 하단의 바닥 글과 겹치는 것을 제외하면 잘 작동합니다.

.container 
    .row 
    .col-sm-3 
     .side-navbar 
     .nav 
      %li 
      %a{href: '#overview'} 
       Overview 
      %li 
      %a{href: '#specification'} 
      ... 
    .col-sm-9 
     #overview 
     ... Content ... 
     #specification 
     ... Content ... 

#footer 
    ... content .... 

을 다음과 같이

보기는 그때 내 JS에서 다음이 있습니다 :

$('.side-navbar').waypoint('sticky', { 
    offset: 0 
}); 

내가 부트 스트랩이 내장 접사와 함께 제공 알고 있지만, 경우에 중간 지점을 계속 사용하고 싶어 해요 가능한. 중복을 중지하는 방법에 대한 어떤 조언을 많이 주시면 감사하겠습니다 :)

Answer 1

$('#footer').waypoint(function(direction) { 
    $('.side-navbar') 
    .toggleClass('sticky', direction === 'up') 
    .toggleClass('at-bottom', direction === 'down') 
}, { 
    offset: function() { 
    return $('.side-navbar').outerHeight() 
    } 
}) 

바닥 글의 상단이 [네비게이션 바의 높이가] 거리의 바닥을 의미 창 상단 (에서 때이 말한다 navbar가 바닥 글의 맨 위를 터치하고 있음) 끈적한 클래스를 제거하고이 클래스를 at-bottom 클래스에 추가합니다. 이제는 at-bottom 클래스의 스타일을 지정하여 수업을 계속해야합니다.

Answer 2

나는이 끈적한 내용이 바닥 글에 들어가는 것을 막기 위해이 jQuery 코드를 사용했다. 질문의 맨 위에있는 정확한 코드와 함께 사용했습니다. 중간 지점에서 풋터 높이를 뺀 값으로이 코드를 사용하십시오. 내 것은 400 픽셀이되었습니다. 이 코드는 모두 동일한 바닥 글을 공유하는 다른 크기의 페이지를 렌더링하는 데 사용되었습니다.

$('.side-navbar').waypoint('sticky', { 
    offset: '13%' 
}); 

$(document).ready(function() { 

    $(window).scroll(function() { 
      var scrollVal = $(this).scrollTop(); 

    if (scrollVal > ($(document).height() - $(window).height()) - 400) { 
      $('.side_navbar').removeClass('stuck');    
     } 
    }); 

}); 

div에 배경색이 없습니다. 내 CSS에서 붙어 있습니다. 투명한 div를 지정하면 배경색이 바닥 글과 겹치지 않게됩니다. 나는 또한 오프셋을 조정할 .waypoint 'sticky'를 오프셋 : '13 % '내 특별한 필요합니다.