div에서 div의 끝에 도달하면 CSS "position"을 어떻게 변경합니까?

소셜 공유 버튼이있는 단일 게시 페이지의 왼쪽에 바를 만드는 웹 사이트 기능을 만들고 있습니다. 막대는 스크롤 할 때 페이지 아래로 독자를 따라갑니다. Mashable.com에서 발견 된 것과 유사합니다.div에서 div의 끝에 도달하면 CSS "position"을 어떻게 변경합니까?

그러나 막대는 사이트의 바닥 글 영역으로 페이지를 아래로 계속 스크롤하지만 컨테이너 div (머리글과 바닥 글 간의 기본 페이지 내용) 끝에 도달하면 중지됩니다. .

"position : fixed"를 "position : absolute"로 바꾸는 데 JavaScript가 관련되어 있다고 생각하지만 정확한 코드는 무엇인지 잘 모르겠습니다.

누구나 생각을 갖고 있습니까/나를 도울 수 있습니까?

출처

2012-01-21 user1161939

내가 내일 게시 할 답변을 얻지 못한다면, 나는 이틀 동안 나갔다! [....] 기본적으로 position 속성을 정적 (페이지가로드 될 때 또는 scrollTop이 원하는 것보다 낮을 때)으로 토글하는 것, 고정 (원하는 scrollTop 위치에 도달 할 때 고정 고정 막대를 시뮬레이트하려는 경우 (예 : 상단 : 15px;) a 고정 및 고정 (상단 : 15px - $ ('#end') .offset ($. '# fixed_element) .height() 더 이상 scoll에 따르지 않는다). 행복한 코딩 –

컨테이너 div 안에 넣으시겠습니까? – mowwwalker

예, 컨테이너 div 안에 넣고 싶습니다. JavaScript로는 그리 좋은 편이 아니기 때문에 기본적인 것보다 적은 것을 써야합니다. 감사! – user1161939

이와 비슷한 jsFiddle?

기본 jQuery를은 다음과 같습니다 https://github.com/sebringj/jquery.dumbfixed

$('#middle .right').dumbFixed();

선택한 항목에 약간의 수정을 수행 할 수 맨 위에 유지하면서

var stickerTop = parseInt($('#sticker').offset().top); 
$(window).scroll(function() { 
    $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? { 
     position: 'fixed', 
     top: '0px' 
    } : { 
     position: 'relative' 
    }); 
});

출처

2012-01-22 03:50:36 j08691

jQuery 플러그인은 컨테이너 내에서 체류 제대로이 작업을 수행 부모는 치수가 설정되어 있지 않을 수 있고 자식을 사용하여 자체 치수로 푸시 할 수 있기 때문에 min-width 및 min-height를 자체 치수로 설정하는 등의 부모입니다.

출처

2012-01-22 04:02:38

div에서 div의 끝에 도달하면 CSS "position"을 어떻게 변경합니까?

답변

관련 문제