jquery scrollToFixed 여러 DIV 내 한계

지난 48 시간 동안이 문제를 해결하기 위해 노력 해왔고 정말 해결책을 찾을 수 없습니다. https://github.com/bigspotteddog/ScrollToFixed 플러그인을 사용하고 있으며 상위 DIV 내에서 고정 위치를 제한하려고합니다. 나는 모두 stackoverflow 및 프로젝트 github 페이지에서 scrollToFixed에 관한 질문을 보았지만이 문제를 해결할 단서를 찾지 못했습니다.jquery scrollToFixed 여러 DIV 내 한계

지금까지, 나는이있다 : http://jsfiddle.net/CVMjp/1/

이 기본 HTML 구조입니다 :

<div class="container" id="element_1"> 
    <div class="content">Content</div> 
    <div class="sticky">Sticky</div> 
</div>

그리고이 페이지의 각 요소에 영향을 내 jQuery를 기능이 될 것입니다 :

$(document).ready(function() { 
for (i = 1; i <= $('.sticky').length; i++) { 

    $('#element_' + i + ' .sticky').scrollToFixed({ 
     marginTop: 20, 
        zIndex:1, 
        limit: $('#element_' + (i + 1) + ' .content').offset().top - $('#element_' + i + ' .sticky').height() - 50 
    }); 
}  
});

.sticky 상자가 각 .content의 맨 아래에 머물러 있기를 원합니다. 지금 예를 들어, .content DIV의 맨 아래에 도달하면 "고정"위치가 "절대"로 바뀌지 만 본문 여백에는 문제가 있습니다 (왜냐하면 "왼쪽"위치는 본문 내에서 왼쪽 위치가 아닌 신체)과 다른 문제들에 대해서는 문제의 근원을 찾을 수 없다.) (또한

는 jsfiddle 예에 .ready $ (문서)에 문제가 없지만, 내 온라인 사이트에서 나는 $ (창) 오프셋 바로 를 얻을 수를 .load 사용했다 각 .content DIV의 .top. document.ready를 사용할 때 분명히 모든 내용의 DIV는 내부에 내용의 양이 다르기 때문에 다르지만 모두 같은 높이를 가진 것처럼 처리됩니다.

이 문제를 해결할 수 있으면이 질문이 업데이트되지만 도움이 될 것입니다.

미리 감사드립니다. :)

출처

2013-01-06 Santiago

약간 다른 접근 방식이 필요합니다.

첫 번째 .sticky은 컨테이너에 있어야합니다. 그런 다음 display: table 및 display: table-cell과 같은 레이아웃 테이블을 만듭니다. table-layout: fixed을 사용하면 .sidebar과 .content을 같은 높이로 유지하는 데 도움이됩니다. 여기 fiddle입니다.

그러나 제한 사항이 있습니다. 예를 들어 position: relative을 본문 태그에만 사용할 수 있습니다.

offset().top 문제에 대해서는 waitForImages 플러그인을 사용하고 .content에만 적용 할 수 있습니다. 더 나은 해결책을 알지 못한다.

출처

2013-01-11 14:06:49 Sergey

jquery scrollToFixed 여러 DIV 내 한계

답변

관련 문제