jquery는 페이지 스크롤에 따라 스크롤되도록 div 레이어를 구현합니다.

ipc.me를 탐색할 때 페이지를 내리면 오른쪽 슬라이더가 항상 창 가장자리 아래에 떠 있는 것 같은 느낌이 들었습니다. Zhang Xinxu의 블로그에 있는 기사에 따르면 경험이 매우 좋습니다. 이러한 기능을 성공적으로 구현한 코드는 다음과 같습니다(jquery 기반으로 구현되었으므로 jquery 파일을 미리 페이지에 가져와야 합니다).

<script type="text/javascript">
$.fn.smartFloat = function() {
    var position = function(element) {
        var top = element.position().top, pos = element.css("position");
        $(window).scroll(function() {
            var scrolls = $(this).scrollTop();
            if (scrolls > top) {
                if (window.XMLHttpRequest) {
                    element.css({
                        position: "fixed",
                        top: 0
                    });    
                } else {
                    element.css({
                        top: scrolls
                    });    
                }
            }else {
                element.css({
                    position: "absolute",
                    top: top
                });    
            }
        });
    };
    return $(this).each(function() {
        position($(this));                         
    });
};
$("要浮动的层id或class").smartFloat();
</script>

물론 Chrome에서는 IE에서는 그렇지 않습니다. 테스트해 본 결과 가능해야 합니다. 구현 원리는 다음과 같습니다(바람직하게는 살펴보고, 원리를 이해하고, 높은 곳에서 문제를 보고, 산과 작은 산을 한눈에 볼 수 있음):

기본 상태는 기본 상태이며, 할 일이 없습니다. 위치 지정이 절대적이든 정적이든 모두 괜찮습니다. 핵심은 브라우저가 스크롤되고 객체(부동될 레이어)가 브라우저 인터페이스 뷰포트에서 제거되어야 할 때 해당 위치 속성을 수정하여 창의 위쪽 가장자리에 부동하고 표시되도록 한다는 것입니다. IE6+ 및 기타 브라우저에서 부동 레이어의 위치를 ​​원활하고 고정할 수 있는 최상의 위치 속성이 고정되어 있습니다. IE6 이전 버전은 고정 속성을 지원하지 않으므로 한발 물러나 대신 절대 속성을 사용하면 부작용이 발생합니다. - 스크롤이 원활하지 않습니다. 그러나 이에 대해 할 수 있는 일은 아무것도 없습니다.

이제 핵심은 현재 레이어가 브라우저 창의 위쪽 가장자리에 닿아 있는지 어떻게 확인하는가입니다. 플로팅 레이어가 브라우저 창의 상단 가장자리에 닿을 때 페이지의 수직 오프셋 값은 실제로 페이지의 스크롤 높이와 동일하므로 이를 사용해 판단하는 것이 좋습니다. 페이지의 요소와 페이지 사이의 거리를 구하는 방법은 무엇입니까? 순수 js 코드로 이 값을 얻는 것은 여전히 ​​까다롭습니다. 다행스럽게도 JavaScript 라이브러리 jQuery는 이러한 작업을 해결하는 데 도움이 됩니다.