Sticky Components_javascript 기술의 향상된 구현에 대한 간략한 토론

이전 기사에서getBoundingClientRect 메서드를 사용하여 간단한 끈적한 구성 요소 구현에서 끈적끈적한 구성 요소의 간단한 구현을 소개했는데, 지난 이틀 동안 고민한 결과 제공되는 구현이 더 많다는 것을 알게 되었습니다. 지난번에 제공한 Unfixing 방법이 좋지 않았던 점을 감안하여, 본 글에서는 더욱 향상된 기능을 제공하는 것이 다른 웹사이트에서도 나타나는 단점입니다. 완료되었습니다. 귀하가 관심을 가지고 읽기를 바랍니다.

1. 이전 버전의 문제

이전 끈적 구성요소 구현에는 여러 가지 문제가 있습니다.

첫째, 끈끈한 효과의 측면에서 끈끈한 요소가 고정되기 전과 후에 변하지 않는 것은 브라우저의 왼쪽을 기준으로 한 위치와 끈끈한 요소의 전체 너비입니다. 브라우저의 상단 또는 하단을 기준으로 한 위치 및 고정 요소의 높이 위에 제공된 구현에서 후자의 두 변경 값은 상수 값으로 간주됩니다. 고정되면 상위 값이나 하위 값이 항상 0인 이유는 무엇입니까? 물론 top: 20px, Bottom: 15px와 같이 0이 아닐 수도 있습니다. 일부 장면에서는 이러한 오프셋을 추가하면 부트스트랩 공식 문서에 사용된 부착물 구성 요소 예와 같이 끈적끈적한 효과가 더 좋아 보입니다(이것은 구성 요소 기능은 이 문서에서 구현된 끈적한 구성 요소와 유사합니다.

고정 시 브라우저 상단을 기준으로 한 위치를 상단: 20px로 설정합니다. 고정 요소의 높이도 마찬가지입니다. 고정 시 더 보기 좋은 효과를 표시하려면 원래의 Line-height 또는 padding-top 및 기타 높이 관련 속성을 조정하는 것이 매우 일반적인 요구 사항입니다. Tmall Huabei의 이 페이지에서 이 블록 콘텐츠는 고정 구성 요소를 사용합니다.

고정 전 끈적 요소의 높이는 다음과 같습니다.

고정 후 끈적 요소의 높이는 다음과 같습니다.

둘째, 고정을 취소할 때 상단에 고정된 고정 요소를 예로 들면, 위에서 제공한 구현은 대상 요소와 브라우저 상단 사이의 거리가 다음과 같을 때 고정 요소의 위치를 ​​직접 취소하는 것입니다. 끈적한 높이보다 작음: 고정 속성, 고정 요소는 즉시 일반 문서 흐름으로 복원되고 효과는 다음과 같습니다.

임계점에 도달하면 즉시 사라지지만 Tmall Huabei의 효과는 이렇지 않습니다.

임계점에 도달하면 바로 사라지지 않고, 스크롤바와 연동하여 웹페이지의 주요 내용과 함께 위로 스크롤할 수 있도록 끈적끈적 요소의 상위 값을 다시 조정합니다.

경험의 관점에서 볼 때 Tmall Huabei의 효과가 더 낫다는 것은 명백합니다. 기능적인 관점에서 위에 제공된 구현에는 치명적인 단점이 있습니다. 즉, 접착 요소의 높이가 매우 클 경우입니다. 해당 영역의 높이를 볼 때 어떻게 스크롤해도 고정 요소의 모든 내용을 탐색할 수 없는 버그가 있을 수 있습니다. 관심이 있는 경우 지난번에 구현된 코드를 시도해 볼 수 있습니다. 블로그의 사이드바. 시도해보고 이 문제를 발견하여 끈적이는 부분을 개선하고 싶었습니다:(
셋째, 마지막 구현에는 여전히 몇 가지 단점이 있습니다.

1) documentElement.clientHeight는 캐시되지 않으므로 임계점이 판단될 때마다 다시 획득됩니다.

2) 스크롤 콜백 간격의 기본값은 너무 크므로 더 작게 설정해야 합니다. 이번에는 5이고 부트스트랩은 1을 사용합니다. 이렇게 해야 효과가 원활하게 보장됩니다.

3) 일부 시나리오에서는 크기 조정이 필요할 때 고정 요소의 너비를 재설정할 필요가 없습니다.

4) Sticky 요소가 고정되고 고정되지 않을 때 다른 컴포넌트가 이 컴포넌트에 의존할 때 주요 지점에서 작업을 수행할 수 있도록 콜백 함수를 제공해야 합니다.

2. 개선 방법

구성요소 옵션이 재정의되었습니다:

var DEFAULTS = {
target: '', //target元素的jq选择器
type: 'top', //固定的位置，top | bottom，默认为top，表示固定在顶部
wait: 5, //scroll事件回调的间隔
stickyOffset: 0, //固定时距离浏览器可视区顶部或底部的偏移，用来设置top跟bottom属性的值，默认为0
isFixedWidth: true, //sticky元素宽度是否固定，默认为true，如果是自适应的宽度，需设置为false
getStickyWidth: undefined, //用来获取sticky元素宽度的回调，在不传该参数的情况下，stickyWidth将设置为sticky元素的offsetWidth
unStickyDistance: undefined, //该参数决定sticky元素何时进入dynamicSticky状态
onSticky: undefined, ///sticky元素固定时的回调
onUnSticky: undefined ///sticky元素取消固定时的回调
};

굵게 표시된 항목은 새 항목이거나 수정된 ​​항목입니다. 원래 높이가 제거되고 unStickyDistance로 대체되었습니다. 수정 시, 브라우저의 상단 또는 하단을 기준으로 한 위치가stickyOffset으로 지정되므로 .sticky--in-top 또는 .sticky--in의 CSS에 상단 또는 하단 속성 값을 쓸 필요가 없습니다. -맨 아래. isFixedWidth가 false인 경우 크기 조정 중에 고정 요소의 너비를 새로 고치는 콜백이 추가됩니다.

!opts.isFixedWidth && $win.resize(throttle(function () {
setStickyWidth();
$elem.hasClass(className) && $elem.css('width', stickyWidth);
sticky();
}, opts.wait));

저번과 비교하면 이번 구현의 문제점은 고정을 취소할 때의 논리적 처리입니다. 지난번에는 끈적끈적한 요소와 끈적이지 않은 두 가지 상태만 있었습니다. staticSticky 및 DynamicSticky 전자는 상단 또는 하단 값이 변경되지 않은 끈적한 상태를 나타내며, 후자는 고정이 약할 때의 범위에 해당합니다. 이 문제를 보다 명확하게 해결하기 위해 원래의 판단은 임계점과 임계점마다 다른 처리를 수행하는 코드를 다음과 같이 재구성합니다.

setSticky = function () {
!$elem.hasClass(className) && $elem.addClass(className).css('width', stickyWidth)
&& (typeof opts.onSticky == 'function' && opts.onSticky($elem, $target));
return true;
},
states = {
staticSticky: function () {
setSticky() && $elem.css(opts.type, opts.stickyOffset);
},
dynamicSticky: function (rect) {
setSticky() && $elem.css(opts.type, rules[opts.type].getDynamicOffset(rect));
},
unSticky: function () {
$elem.hasClass(className) && $elem.removeClass(className).css('width', '').css(opts.type, '')
&& (typeof opts.onUnSticky == 'function' && opts.onUnSticky($elem, $target));
}
},
rules = {
top: {
getState: function (rect) {
if (rect.top < 0 && (rect.bottom - unStickyDistance) > 0) return 'staticSticky';
else if ((rect.bottom - unStickyDistance) <= 0 && rect.bottom > 0) return 'dynamicSticky';
else return 'unSticky';
},
getDynamicOffset: function (rect) {
return -(unStickyDistance - rect.bottom);
}
},
bottom: {
getState: function (rect) {
if (rect.bottom > docClientHeight && (rect.top + unStickyDistance) < docClientHeight) return 'staticSticky';
else if ((rect.top + unStickyDistance) >= docClientHeight && rect.top < docClientHeight) return 'dynamicSticky';
else return 'unSticky';
},
getDynamicOffset: function (rect) {
return -(unStickyDistance + rect.top - docClientHeight);
}
}
}
$win.scroll(throttle(sticky, opts.wait));
function sticky() {
var rect = $target[0].getBoundingClientRect(),
curState = rules[opts.type].getState(rect);
states[curState](rect);
}

상태 모델에 대한 아이디어가 약간 있지만 더 간결합니다. 이 코드를 작성할 때 이전에 배운 상태 기계를 꼭 사용하고 싶었습니다. 상태 기계를 사용하여 작성하는 것이 확실히 가능하다고 생각했지만 참조되지 않도록 하나의 클래스 라이브러리를 저장하고 싶었습니다. 언젠가 상태 머신을 연습하고 싶을 때 다시 시도해 보세요.

전체 구현은 다음과 같습니다.

var Sticky = (function ($) {
function throttle(func, wait) {
var timer = null;
return function () {
var self = this, args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
return typeof func === 'function' && func.apply(self, args);
}, wait);
}
}
var DEFAULTS = {
target: '', //target元素的jq选择器
type: 'top', //固定的位置，top | bottom，默认为top，表示固定在顶部
wait: 5, //scroll事件回调的间隔
stickyOffset: 0, //固定时距离浏览器可视区顶部或底部的偏移，用来设置top跟bottom属性的值，默认为0
isFixedWidth: true, //sticky元素宽度是否固定，默认为true，如果是自适应的宽度，需设置为false
getStickyWidth: undefined, //用来获取sticky元素宽度的回调，在不传该参数的情况下，stickyWidth将设置为sticky元素的offsetWidth
unStickyDistance: undefined, //该参数决定sticky元素何时进入dynamicSticky状态
onSticky: undefined, ///sticky元素固定时的回调
onUnSticky: undefined ///sticky元素取消固定时的回调
};
return function (elem, opts) {
var $elem = $(elem);
opts = $.extend({}, DEFAULTS, opts || {}, $elem.data() || {});
var $target = $(opts.target);
if (!$elem.length || !$target.length) return;
var stickyWidth,
setStickyWidth = function () {
stickyWidth = typeof opts.getStickyWidth === 'function' && opts.getStickyWidth($elem) || $elem[0].offsetWidth;
},
docClientHeight = document.documentElement.clientHeight,
unStickyDistance = opts.unStickyDistance || $elem[0].offsetHeight,
setSticky = function () {
!$elem.hasClass(className) && $elem.addClass(className).css('width', stickyWidth)
&& (typeof opts.onSticky == 'function' && opts.onSticky($elem, $target));
return true;
},
states = {
staticSticky: function () {
setSticky() && $elem.css(opts.type, opts.stickyOffset);
},
dynamicSticky: function (rect) {
setSticky() && $elem.css(opts.type, rules[opts.type].getDynamicOffset(rect));
},
unSticky: function () {
$elem.hasClass(className) && $elem.removeClass(className).css('width', '').css(opts.type, '')
&& (typeof opts.onUnSticky == 'function' && opts.onUnSticky($elem, $target));
}
},
rules = {
top: {
getState: function (rect) {
if (rect.top < 0 && (rect.bottom - unStickyDistance) > 0) return 'staticSticky';
else if ((rect.bottom - unStickyDistance) <= 0 && rect.bottom > 0) return 'dynamicSticky';
else return 'unSticky';
},
getDynamicOffset: function (rect) {
return -(unStickyDistance - rect.bottom);
}
},
bottom: {
getState: function (rect) {
if (rect.bottom > docClientHeight && (rect.top + unStickyDistance) < docClientHeight) return 'staticSticky';
else if ((rect.top + unStickyDistance) >= docClientHeight && rect.top < docClientHeight) return 'dynamicSticky';
else return 'unSticky';
},
getDynamicOffset: function (rect) {
return -(unStickyDistance + rect.top - docClientHeight);
}
}
},
className = 'sticky--in-' + opts.type,
$win = $(window);
setStickyWidth();
$win.scroll(throttle(sticky, opts.wait));
!opts.isFixedWidth && $win.resize(throttle(function () {
setStickyWidth();
$elem.hasClass(className) && $elem.css('width', stickyWidth);
sticky();
}, opts.wait));
$win.resize(throttle(function () {
docClientHeight = document.documentElement.clientHeight;
}, opts.wait));
function sticky() {
var rect = $target[0].getBoundingClientRect(),
curState = rules[opts.type].getState(rect);
states[curState](rect);
}
}
})(jQuery);

이해하기 어려운 것은 getState 메소드의 논리일 수 있습니다. 이 부분의 아이디어 중 일부는 이전 블로그에서 더 자세히 설명되었습니다.

3. 블로그 사이드바 신청 안내

먼저 이 구현을 블로그 설정 바닥글 html 텍스트 필드에 붙여넣은 후 다음 코드를 추가하여 초기화해야 합니다.

var timer = setInterval(function(){
if($('#blogCalendar').length && $('#profile_block').length && $('#sidebar_search').length) {
new Sticky('#sideBar', {
target: '#main',
onSticky: function($elem, $target){
$target.css('min-height',$elem.outerHeight());
$elem.css('left', '65px');
},
onUnSticky: function($elem, $target){
$target.css('min-height','');
$elem.css('left', '');
}
});
}
},100);

사이드바의 콘텐츠가 ajax에 의해 로드되기 때문에 타이머가 사용되며, 이러한 ajax 요청 중에는 콜백을 추가할 수 없습니다. 사이드바가 반환되는 콘텐츠를 통해서만 사이드바가 로드되는지 여부를 판단할 수 있습니다.

4. 요약

이번 주말에는 끈적끈적한 구성요소를 어떻게 개선할지 고민했습니다. 게다가 이 글을 쓰면서 하루의 대부분을 보냈습니다. 적어도 지금은 지난번에 작성한 끈적끈적한 구성요소의 기능과 구현에 조금 만족하고 있습니다. 뭔가 부족한 것 같은 기분이 들었지만, 그래도 부족한 게 너무 많아서 그런 것 같았다. 현재 이 구성 요소는 수정 및 수정 해제 효과만 얻을 수 있습니다. 실제 작업에서는 이 수준의 효과가 충분하지 않을 수 있습니다. 수정되는 동안 탐색 스크롤 또는 탭 탐색을 지원하는 인터넷의 일반적인 기능도 매우 일반적입니다. 다음 이 문서에서는 이 문서를 기반으로 navScrollSticky 및 tabSticky 구성 요소를 구현하는 방법에 따라 끈적한 구성 요소를 소개하므로 계속 지켜봐 주시기 바랍니다.
읽어주셔서 감사합니다 :)

추가 설명:
IE와 Firefox에서 페이지를 새로고침할 때, 새로고침하기 전에 페이지가 스크롤 중이라면 새로고침 작업을 통해 페이지의 스크롤 위치가 새로고침 위치로 설정되지만 스크롤 이벤트는 발생하지 않으므로 직후에 호출해야 합니다. 구성 요소가 초기화되었습니다.