js 페이지 스크롤 시 레이어의 지능형 부동 위치 지정 구현(jQuery/MooTools)_jquery

1. 애플리케이션 표시
레이어의 스마트 플로팅 효과에 대해 몇 년 전에 해외 일부 개인 웹 사이트의 세로 탐색에서 본 적이 있는데, 지금은 일부 국내에도 있는 것 같습니다. 이 효과는 Taobao 검색 결과 페이지의 수평 막대 정렬과 같이 자주 나타납니다. 기본 상태에서는 다음과 같이 스크롤 막대가 페이지와 함께 스크롤됩니다.
페이지가 아래로 스크롤되면서 가로 막대가 브라우저 상단 가장자리에 닿으면 다음 그림과 같이 가로 막대가 독립되어 스크롤 막대와 함께 스크롤되지 않습니다.

Sina Weibo에서도 유사한 효과를 볼 수 있습니다:

페이지가 스크롤되고 새 동적 프롬프트가 브라우저 창에서 사라지기 시작하면 아래 그림과 같이 브라우저 창의 상단 가장자리에 떠 있습니다.

이 효과를 구현하는 원리는 실제로 매우 간단하며, 이번 글에서는 그 구현을 보여드리겠습니다.

2. 구현 원리

기본 상태는 기본 상태로, 위치 지정이 절대적이든 정적이든 괜찮습니다. . 핵심은 브라우저가 스크롤되고 객체(부동될 레이어)가 브라우저 인터페이스 뷰포트에서 제거되어야 할 때 해당 위치 속성을 수정하여 창의 위쪽 가장자리에 부동하고 표시되도록 한다는 것입니다. IE6 및 기타 브라우저에서 플로팅 레이어의 위치를 ​​원활하고 고정할 수 있는 최상의 위치 속성이 고정되어 있습니다. IE6 이전 버전은 고정 속성을 지원하지 않으므로 한발 물러나 대신 절대 속성을 사용하면 부작용이 발생합니다. - 스크롤이 원활하지 않습니다. 그러나 이에 대해 할 수 있는 일은 아무것도 없습니다.
이제 핵심은 현재 레이어가 브라우저 창의 위쪽 가장자리에 닿아 있는지 어떻게 확인하는가입니다. 플로팅 레이어가 브라우저 창의 상단 가장자리에 닿을 때 페이지의 수직 오프셋 값은 실제로 페이지의 스크롤 높이와 동일하므로 이를 사용해 판단하는 것이 좋습니다. 페이지의 요소와 페이지 사이의 거리를 구하는 방법은 무엇입니까? 순수 js 코드로 이 값을 얻는 것은 여전히 ​​까다롭습니다. 다행스럽게도 JavaScript 라이브러리는 이러한 작업을 해결하는 데 도움이 되므로 실제로 작업은 jQuery 라이브러리와 MooTools 라이브러리에서 매우 원활하게 이루어집니다.

3. jQuery 하의 레이어 스마트 플로팅


메소드 코드는 다음과 같습니다.


코드 복사

코드는 다음과 같습니다. $.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: 스크롤
})
}
}else {
element.css({
위치: "절대 ",
top: top
});
}
});
};
return $(this).each(function() {
position($ (this));
};


호출은 매우 간단합니다. 예를 들면 다음과 같습니다.

$( "#float").smartFloat( ; 더 이상 스크롤 막대를 따르지 않습니다.

여기를 클릭하세요: jQuery 아래 레이어의 스마트 플로팅 데모

데모 페이지를 열면 오른쪽에 떠 있는 레이어가 표시됩니다. 페이지를 스크롤하여 효과를 관찰하세요.



4. MooTools 아래 레이어의 스마트 플로팅
jQuery 구현과 유사하게 이 메서드도 MooTools 라이브러리에 패키지되어 있습니다.

코드 복사

코드는 다음과 같습니다.

var $smartFloat = function(elements) {
var position = function(element) {
var top = element.getPosition().y, pos = element.getStyle("position") ;
window.addEvent("scroll", function() {
var scrolls = this.getScroll().y;
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.setStyles({
위치: "고정",
상위: 0
})
} else {
element.setStyles({
상위: 스크롤
});
}
}else {
element.setStyles({
위치: "절대",
상단: 상단
})
});
};
if ($type(elements) === "array") {
return elements.each(function(items) {
position(items);
})
} else if ($type(elements) === "요소") {
위치(요소)
}


사용 방법도 매우 간단합니다. 코드 한 줄만 사용하면 됩니다. 예를 들어 id가 float인 태그를 사용하면 코드는 다음과 같습니다.

$smartFloat($("float"))
여기를 클릭할 수 있습니다. ：MooTools 아래 레이어의 스마트 플로팅 데모

데모 페이지의 스크롤 막대를 스크롤하세요. "부끄러워하는" 플로팅 레이어가 브라우저 가장자리에 "접촉"하면 더 이상 작동하지 않습니다. 아래와 같이 스크롤 막대를 따라갑니다.


Zhang Xinxu