การใช้รูปแบบ CSS "ตำแหน่ง: แก้ไข" ช่วยให้บล็อก DIV ได้รับการแก้ไขในตำแหน่งคงที่และตำแหน่งของมันจะไม่เปลี่ยนแปลงแม้ว่าจะมีแถบเลื่อน ตำแหน่ง: การแก้ไขได้นำเอฟเฟกต์ที่น่าทึ่งมาสู่นักพัฒนาหลายคน แต่เมื่อแถบเลื่อนแนวนอนปรากฏขึ้นเอฟเฟกต์ก็ไม่ง่ายเลยที่จะยอมรับ บางครั้งเราหวังว่าเมื่อแถบเลื่อนแนวนอนปรากฏขึ้นบล็อก DIV สามารถเคลื่อนที่ไปทางซ้ายและขวาด้วยแถบเลื่อนได้รับตำแหน่งคงที่แนวตั้ง (คงที่) และการวางตำแหน่งสัมพัทธ์แนวนอน (สัมบูรณ์) บทความนี้ให้บริการโซลูชันพร้อมซอร์สโค้ดส่วนขยาย jQuery
วิธีการใช้งานของบทความนี้คือการใช้ JS เพื่อควบคุม Div Block เพื่อเลื่อนในแนวนอนด้วยแถบเลื่อน เวลา. ตำแหน่ง: การปรับเปลี่ยนสไตล์คงที่เมื่อต้องการบล็อก DIV
เมื่อบล็อก DIV ได้รับการแก้ไขในแนวนอนเมื่อเทียบกับด้านขวาของเบราว์เซอร์จากนั้นเมื่อการเลื่อนหรือปรับขนาดเหตุการณ์เกิดขึ้นในวัตถุหน้าต่างค่าสไตล์ขวาของมันจะได้รับการปรับปรุงและค่าของมันควรจะเป็น:
การคัดลอกรหัสมีดังนี้:
var new_right = ($ (window) .scrollleft () + $ (หน้าต่าง) .width () - $ (เอกสาร) .width () + Original_right) + 'px'
เมื่อบล็อก DIV ได้รับการแก้ไขในทิศทางแนวนอนเมื่อเทียบกับด้านซ้ายของเบราว์เซอร์จากนั้นเมื่อมีการเลื่อนหรือปรับขนาดเหตุการณ์เกิดขึ้นในวัตถุหน้าต่างค่าสไตล์ซ้ายจะได้รับการปรับปรุงและค่าของมันควรจะเป็น:
การคัดลอกรหัสมีดังนี้:
var new_left = (Original_left - $ (หน้าต่าง) .scrollleft ()) + 'px'
Original_left และ Original_right ปรากฏในรหัสด้านบนเป็นค่าซ้ายและขวาของบล็อก Div ดั้งเดิม รหัสส่วนขยาย jQuery ที่สมบูรณ์มีดังนี้:
การคัดลอกรหัสมีดังนี้:
(ฟังก์ชั่น ($) {
$ .scrollfixed = function (el, ตัวเลือก) {
var base = this;
ฐาน. $ el = $ (el);
base.el = el;
var target = base. $ el;
var Original_left = parseInt (target.css ('ซ้าย'));
var Original_right = ParseInt (target.css ('ขวา'));
var _fix_position = function () {
if (base.options.fixed == 'ขวา') {
target.css ('ขวา', ($ (หน้าต่าง) .scrollleft () + $ (หน้าต่าง) .width () - $ (เอกสาร) .width () + Original_right) + 'px');
} อื่นถ้า (base.options.fixed == 'ซ้าย') {
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 (ตัวเลือก) {
return this.each (function () {
(ใหม่ $ .scrollfixed (ตัวเลือกนี้));
-
-
}) (jQuery);
ตัวอย่างการใช้งาน:
การคัดลอกรหัสมีดังนี้:
$ ('#leftsider'). scrollfixed ({recide: 'left'});
$ ('#Rightider'). Scrollfixed ({recide: 'Right'});