CSS 스타일 "위치 : 고정"을 사용하면 DIV 블록을 고정 위치로 고정 할 수 있으며 스크롤 막대가 있더라도 위치가 변경되지 않습니다. 포지션 : 고정은 많은 개발자들에게 놀라운 효과를 가져 왔지만 수평 스크롤 막대가 나타나면 그 효과를 받아들이는 것이 쉽지 않습니다. 때로는 수평 스크롤 막대가 나타날 때 DIV 블록이 스크롤 막대와 함께 왼쪽과 오른쪽으로 이동하여 수직 고정 위치 (고정) 및 수평 상대 위치 (절대)를 달성 할 수 있기를 바랍니다. 이 기사는 jQuery 확장 소스 코드와 함께 솔루션을 제공합니다.
이 기사의 구현 방법은 JS를 사용하여 DIV 블록을 제어하여 스크롤 막대와 함께 DIV 블록의 왼쪽 값을 업데이트하는 것입니다 시간. 위치 : DIV 블록이 필요할 때 고정 스타일 수정.
DIV 블록이 브라우저의 오른쪽에 상대적으로 수평으로 고정되면 Window 개체에서 스크롤 또는 크기 조정 이벤트가 발생하면 오른쪽 스타일 값이 업데이트되며 그 값은 다음과 같습니다.
코드 사본은 다음과 같습니다.
var new_right = ($ (창) .scrollleft () + $ (Window) .width () - $ (document) .width () + original_right) + 'px'
DIV 블록이 브라우저의 왼쪽에 대한 수평 방향으로 고정되면 Window 개체에서 스크롤 또는 크기 조정 이벤트가 발생하면 왼쪽 스타일 값이 업데이트되며 그 값은 다음과 같습니다.
코드 사본은 다음과 같습니다.
var new_left = (original_left- $ (창) .scrollleft ()) + 'px'
Original_Left 및 Original_right는 위 코드에 나타납니다. 원래 DIV 블록의 왼쪽 및 오른쪽 값입니다. 완전한 jQuery 확장 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
(기능 ($) {
$ .scrollfixed = function (el, 옵션) {
var base = 이것;
기본. $ el = $ (el);
base.el = el;
var target = base. $ el;
var original_left = parseint (target.css ( '왼쪽'));
var original_right = parseint (target.css ( 'right'));
var _fix_Position = function () {
if (base.options.fixed == 'right') {
target.css ( '오른쪽', ($ (창) .scrollleft () + $ (창) .width () - $ (document) .width () + original_right) + 'px');
} else if (base.options.fixed == 'left') {
target.css ( '왼쪽', (Original_Left- $ (창) .scrollleft ()) + 'px');
}
};
var windowresize = function () {
_fix_Position ();
};
var windowscroll = function () {
_fix_Position ();
};
base.init = function () {
base.options = $ .extend ({}, $ .scrollfixed.defaultoptions, 옵션);
$ (Window) .Resize (WindowResize);
$ (창) .Scroll (WindowsCroll);
_fix_Position ();
console.log (base.options.fixed);
};
base.init ();
};
$ .scrollfixed.defaultoptions = {
고정 : '왼쪽'
};
$ .fn.scrollfixed = function (옵션) {
reture this.each (function () {
(새로운 $ .scrollfixed (this, 옵션));
});
};
}) (jQuery);
사용의 예 :
코드 사본은 다음과 같습니다.
$ ( '#leftsider'). scrollfixed ({고정 : '왼쪽'});
$ ( '#rightider'). scrollfixed ({고정 : 'right'});