باستخدام نمط CSS "الموضع: الثابت" يسمح بتثبيت كتلة div في وضع ثابت ، ولن يتم تغيير موضعه حتى إذا كان هناك شريط تمرير. الموضع: جلب الثابت تأثيرات مذهلة للعديد من المطورين ، ولكن عندما تظهر قضبان التمرير الأفقية ، ليس من السهل قبول التأثير. في بعض الأحيان نأمل أنه عندما يظهر شريط التمرير الأفقي ، يمكن أن تتحرك كتلة DIV إلى اليسار واليمين مع شريط التمرير ، مما يحقق تحديد المواقع الثابتة الرأسية (ثابتة) والوضع النسبي الأفقي (المطلق). توفر هذه المقالة حلاً ، مع رمز مصدر تمديد jQuery.
تتمثل طريقة التنفيذ في هذه المقالة في استخدام كتلة DIV للتمرير أفقياً مع شريط التمرير وقت. الموضع: تعديل النمط الثابت عند الحاجة إلى كتلة DIV.
عندما يتم إصلاح كتلة DIV أفقياً بالنسبة إلى الجانب الأيمن من المتصفح ، ثم عند حدوث تمرير أو تغيير حجم في كائن النافذة ، يتم تحديث قيمته على النمط الأيمن ، ويجب أن تكون قيمته:
نسخة الكود كما يلي:
var new_right = ($ (window) .scrollleft () + $ (window) .width () - $ (document) .width () + Original_Right) + 'px'
عندما يتم تثبيت كتلة DIV في الاتجاه الأفقي بالنسبة إلى الجانب الأيسر من المتصفح ، ثم عند حدوث حدث التمرير أو تغيير الحجم في كائن النافذة ، يتم تحديث قيمته على النمط الأيسر ، وينبغي أن تكون قيمته:
نسخة الكود كما يلي:
var new_left = (Original_Left - $ (window) .scrollleft ()) + 'px'
تظهر Original_Left و Original_Right في الكود أعلاه هي القيم اليسرى واليمين لكتلة Div الأصلية. رمز تمديد jQuery الكامل كما يلي:
نسخة الكود كما يلي:
(وظيفة ($) {
$ .scrollfixed = function (EL ، Options) {
var base = هذا ؛
قاعدة. $ el = $ (el) ؛
base.el = el ؛
var target = base. $ el ؛
var Original_left = parseint (target.css ('left')) ؛
var Original_Right = parseint (target.css ('right')) ؛
var _fix_position = function () {
if (base.options.fixed == 'right') {
Target.css ('right' ، ($ (window) .Scrollleft () + $ (window) .width () - $ (document) .width () + Original_Right) + 'px') ؛
} آخر إذا (base.options.fixed == 'left') {
Target.css ('Left' ، (Original_Left - $ (window) .Scrollleft ()) + 'px') ؛
}
} ؛
var windowResize = function () {
_fix_position () ؛
} ؛
var windowscroll = function () {
_fix_position () ؛
} ؛
base.init = function () {
base.options = $ .Extend ({} ، $ .ScrollFixed.DefaultOptions ، Options) ؛
$ (نافذة).
$ (window) .scroll (windowscroll) ؛
_fix_position () ؛
console.log (base.options.fixed) ؛
} ؛
base.init () ؛
} ؛
$ .scrollfixed.defaultoptions = {
ثابت: "اليسار"
} ؛
$ .fn.scrollfixed = وظيفة (خيارات) {
إرجاع this.each (function () {
(new $ .scrollfixed (هذا ، الخيارات)) ؛
}) ؛
} ؛
}) (jQuery) ؛
أمثلة على الاستخدام:
نسخة الكود كما يلي:
$ ('#LeftSider'). scrollfixed ({ثابت: 'Left'}) ؛
$ ('#fervaleider'). scrollfixed ({ثابت: 'right'}) ؛