شريط جانبي عائم ثابت. ثابت تخطيط عمودين الشريط الجانبي الثابت

ومن المثير للاهتمام أن الكتلة التي تبقى في مكان واحد عند التمرير تسمى: "متحرك", "يطفو على السطح", "متحرك", "التليفون المحمول", "انزلاق". وفي الحقيقة هو "عالق", "مُثَبَّت", "مُثَبَّت"وموجود في منطقة معينة من شاشة العرض ، بغض النظر عن درجة التمرير في صفحة الويب.

المتغير الأولي عندما لا يطفو شيء

البيانات الأولية: الكتلة موجودة بالفعل. لدي شيء مثل هذا مع تذييل كبير ، لديك بشكل مختلف.

كيفية جعل كتلة (div ، جانبًا ، إلخ) ، رأس ، إعلان ، قائمة ثابتة. فقط CSS

كتلة عائمة تتجمد فوق تذييل أو عنصر آخر. نقي جافا سكريبت بدون jQuery

حتى لا تختفي الكتلة العائمة ، لا تنتقل إلى تذييل الموقع ، ولكنها تتوقف فوق العنصر المحدد.

يتم لصق العنصر فقط أثناء التمرير عبر عنصر آخر

لجعل العنصر غير من الخطاف ويتوقف عند انتهاء حقل المقالة. بمعنى ، يجب أن تكون الحدود السفلية للمقال جانباً على نفس السطر.

كيفية جعل كتلتين (اختياريتين) تلتصقان في كلا الشريطين الجانبيين

تم إصلاح كتلتين أو أكثر واحدة تلو الأخرى

عند التمرير لأسفل ، يتم لصق الكتلة الأولى ، وعندما ينتهي الوالد ، يتم فكها ؛ الثاني يلتصق ، عندما ينتهي الوالد ، ينطلق ؛ العصي الثالثة ، وهكذا.

نفس الشيء ، فقط مع أحد الوالدين.

شريط جانبي طويل عائم بدون مساحة بيضاء

عند التمرير لأسفل ، يظل الشريط الجانبي ثابتًا عندما تلامس الحافة السفلية الحافة السفلية لنافذة المتصفح. عند التمرير لأعلى ، يظل الشريط الجانبي ثابتًا عندما تلامس الحافة العلوية الحافة العلوية لنافذة المتصفح. هناك حد أدنى يصل إليه العمود.

هناك حاجة إلى كتلة عائمة (أو كما يطلق عليها أيضًا متحركة ، ثابتة ، عالقة) على الموقع بحيث يرى المستخدم عنصرًا ثابتًا واحدًا عند التمرير في الصفحة ، حيث يتم وضع الإعلانات في أغلب الأحيان (إعلانات تشويقية أو لافتات أو سياق).

للأسف ، تمنعنا قواعد adsense من ذلك. ومع ذلك ، يتجاهل العديد من مالكي المواقع القواعد على مسؤوليتهم الخاصة. ربما لم تتم معاقبتهم حتى على هذا ، لكنني لا أنصح بالمجازفة.

أضع YAN ، والجمل التشويقية / اللافتات الخاصة بي في مثل هذه الكتل ، وفي بعض الأحيان ، بدلاً من الإعلان ، أعرض منشورات مماثلة أو بعض المعلومات المفيدة للزائر.

دعنا نخبرك كيف يمكنك إنشاء كتلة عائمة على موقعك.

مهمة:اجعل الكتلة الأخيرة في الشريط الجانبي (الشريط الجانبي) عائمة. علاوة على ذلك ، بحيث يتم لصقها فقط في اللحظة التي يصل فيها المستخدم إليها عن طريق التمرير ، وليس فورًا عند فتح الصفحة. أيضًا ، يجب أن "تلتصق" الكتلة بالوصول إلى التذييل (أي عدم تداخلها).

أكثر طريقة عمل

هناك العديد من تطبيقات الكتلة اللاصقة ، ولكن لا تعمل جميعها بشكل صحيح. سأخبرك من خلال التجربة الشخصية: يمكن أن تعمل طريقة تثبيت الكتلة نفسها في موقع واحد ، وستظهر العضادات على موقع آخر.

يوجد أدناه مثال على كتلة عائمة عملت تقريبًا على كل موقع قمت بتثبيته عليه. لم يكن هناك ماعز. المحرك ليس مهمًا أيضًا (DLE و WordPress و LiveStreet وما إلى ذلك).

الصق كود HTML التالي في المكان المطلوب للشريط الجانبي:

$ (نافذة). انتقل (الوظيفة () (
فار sb_m = 20 ؛ / * حشوة علوية وسفلية * /
فار ميغابايت = 300 ؛ / * ارتفاع القبو مع الهامش * /
varst = $ (window) .scrollTop () ،
var sb = $ (". sticky-block") ؛
var sbi = $ (". sticky-block .inner") ؛
var sb_ot = sb.offset () .top ،
var sbi_ot = sbi.offset () .top ،
var sb_h = sb.height () ،

إذا كان (sb_h + $ (مستند) .scrollTop () + sb_m + mb< $(document) .height () ) {
إذا (st> sb_ot) (
var h = Math.round (st - sb_ot) + sb_m ؛
sb.css (("paddingTop": h)) ؛
}
آخر(
sb.css (("paddingTop": 0)) ؛
}
}
} ) ;

في هذا الكود ، يمكنك تعيين الجزء العلوي والسفلي والارتفاع للتذييل ، أي الارتفاع الذي يجب أن تتوقف عنده الكتلة.

الآن نقوم بتضمين JS. للقيام بذلك ، اكتب في قسم HEAD:

يمكنك استخدام ملف header.php نفسه عن طريق إرفاق هذا الرمز بين علامات الفتح والإغلاق الرئيسية ولفه في علامات البرنامج النصي ، مثل:

يمكنك أيضًا كتابة هذا الرمز في علامات البرنامج النصي في أي مكان آخر. الشيء الرئيسي هو أنه يتم تحميله على الصفحات الصحيحة من المدونة. على سبيل المثال ، يمكنك ذلك في footer.php قبل علامة إغلاق النص.

الآن دعنا ننتقل مباشرة إلى هذا الرمز. اتضح أنه بعد 10 بكسل من الأعلى ، يتم استبدال الموضع النسبي بواحد ثابت (انظر المقالة على الرابط أعلاه). إذا لزم الأمر ، في السطر مع else ، يمكنك اختيار قيمة أخرى غير الصفر للأعلى ، وبعد ذلك ستنطلق القائمة المثبتة في الأعلى من الحافة العلوية لإطار العرض بقيمة البكسل هذه (في رأيي ، هذا غير ضروري) .

على عكس الكود الأصلي ، كان علي أيضًا إضافة عرض: "100٪" ، وإلا فإن حجم القائمة في العرض سينخفض ​​، مما يفسد الصورة بأكملها.

انظر ، من أجل الوضوح ، سأقدم كود Html الذي يشكل القائمة العلوية في قالب مدونة WordPress الخاص بي (يوجد في ملف header.php الخاص بي من):

في القالب الخاص بك ، على الأرجح ، سيتم تعيين إخراج عناصر القائمة باستخدام ، على سبيل المثال ، مثل هذا البناء (الوظيفة) ، ولكن هذا ليس هو الهدف.

تعد وظيفة wp_list_pages جيدة بالطبع (تتيح لك تكوين الفرز وتعيين الاستثناءات وما إلى ذلك) ، ولكن من الأفضل القيام بكل شيء يدويًا من خلال لغة Html العادية ، كما هو موضح أعلاه. برأيي المتواضع.

من المهم أن نفهم هنا أن الأمر برمته قد انتهى إلى divs الحاوية ، والأعلى واحدله معرف = سمة "نافي". هنا سوف نتشبث به. ترى في رمز JS أعلاه أنه يحدث مرتين # نافي؟ ستحتاج إلى وضع المعرف الخاص بك هناك بدلاً من #navi (أو فصل دراسي ، كما تتذكر ، ليس مكتوبًا من خلال شبكة ، ولكن من خلال نقطة ، على سبيل المثال ، مثل هذا: .menu).

بعد ذلك ، يجب أن تكون قائمتك ثابتة في الموضع العلوي عند تمرير الصفحة بعدد معين من وحدات البكسل. ومع ذلك ، أواجه مشكلة في حقيقة أن هذه القائمة بالذات لا تظهر دائمًا أعلى عناصر الصفحة التي كانت تطفو فوقها.

هذا ، كما ترى ، ليس جيدًا. لذلك ، كان عليّ إدخال القليل في رمز CSS وإضافة قيمة 1000 لمعرّف محدّد #navi:

#navi (الخلفية: # 03658e url (https: //website/wp-content/themes/Organic/images/spriteme2.png) تكرار x ؛ موضع الخلفية: 0 بكسل -10 بكسل ؛ الارتفاع: 31 بكسل ؛ مؤشر z: 1000 )

الحقيقة هي أنه عند تعيين أحد الأنواع الثلاثة لتحديد المواقع باستخدام الموضع ، فإن هذا العنصر يتوقف عن التفاعل مع العناصر المعتادة في كود Html. ولكن مع المواقف الأخرى المماثلة ، سوف تتنافس على المركز "أعلى أو أسفل". z-index: 1000 يسمح لنا بوضع قائمتنا بوضوح فوق جميع الكتل الأخرى. اقرأ المقال أعلاه للحصول على التفاصيل.

كيفية إنشاء شريط جانبي عائم في WordPress بدون مكونات إضافية

باستخدام الطريقة الموضحة أدناه ، يمكنك جعل الشريط الجانبي بالكامل أو جزء منه عائمًا (أو بعبارة أخرى ، إصلاحه في مكان معين في منفذ العرض). إذا كانت هذه المنطقة صغيرة جدًا وتناسب شاشة واحدة (حتى لو كان جهازًا محمولًا) ، فيمكنك جعلها تطفو بالكامل.

ولكن في أغلب الأحيان لن يكون هذا هو الحال ، وسيكون من الممكن إجبار الجزء السفلي على الطفو. إذا كان الشريط الجانبي ، كما في حالتي ، مترابطًا لا ينفصل ، فيمكنك إنشاء كتلة عائمة بنفسك باستخدام المبادئ المنصوص عليها في سمة التصميم التي تستخدمها ووضعها أسفل القالب الرئيسي.

لقد فعلت كل هذا بسرعة ودون أن أزعج نفسي بالرتوش وإيجاد الحل الأمثل ، لأنه من تجربتي الغنية بالتجارب تعلمت النمط القائل إنه كلما زاد عدد آمالك في فكرة ما ، قل احتمال "التصوير". حسنًا ، بالعكس. بشكل عام ، لم يكن هناك جدوى من الإزعاج حتى الآن ، لأن احتمال أن يتجذر كل هذا ليس كبيرًا.

لذلك أخذت للتو لإنشاء الكتلة السفليةلقد قمت بنقل الجزء العلوي من الشريط الجانبي الرئيسي (في قالب sidebar.php) ، ثم قمت بنقله من الجزء العلوي إلى الكتلة السفلية "أستخدمه لكسب المال" ، وفي النهاية تم تثبيت ما كان النهاية في القالب الرئيسي الكتلة. اتضح شيء من هذا القبيل:

حسنًا ، لقد تم الآن نقل كتلة "أنا استخدم للأرباح" من الكتلة العلوية للشريط الجانبي إلى الجزء السفلي. اتضح أنها ليست نافورة ، لكنها ستفعل "مؤقتًا". يبقى فقط ترتيب كل هذا في ملف JS برمز وستبدأ الكتلة السفلية في الطفو. يبدو كود JS كما يلي:

$ (document) .ready (function () (var br = $ .browser؛ $ (window) .scroll (function () (var top = $ (document) .scrollTop () ؛ if (top< 2561) { $(".sidebar123").css({top: "0", position: "relative", marginLeft: "25px"}); } else if ((!br.msie) || ((br.msie) && (br.version >7))) ($ (". sidebar123"). css ((أعلى: "52px" ، الموضع: "ثابت" ، marginLeft: "760px")) ؛) وإلا إذا ((br.msie) && (br.version<= 7)) { $(".sidebar123").css({top: "52px", position: "fixed", marginLeft: "25px"}); } }); });

لاحظ أنه بدلاً من .sidebar123 ، تحتاج إلى استبدال صنفك أو معرف الحاوية الخارجية التي تعيش فيها الكتلة السفلية للشريط الجانبي.

لا أفهم هذا الرمز جيدًا (لا أعرف JS) ، لكن كل شيء يعمل. على الأقل جزئيا. عند تعيين موضع ثابت ، يكون التقرير من أعلى نقطة على اليسار. لذلك ، باستخدام marginLeft: "760px" أضع هذه الكتلة بالضبط على مستوى الشريط الجانبي (تم الحصول على الرقم من خلال "التجربة والخطأ").

أعلى قيمة: يعيّن "52 بكسل" المساحة المتروكة لكتلة الشريط الجانبي العائمة بالفعل من الحد العلوي. قيمة أعلى ومع ذلك ، لدي كان هناك مشكلةفي حالة أن الارتفاع الإجمالي للشريط الجانبي الرئيسي كان أقل من ارتفاع منطقة المحتوى. خرج مثل هذا الشيء ، على سبيل المثال ، عند عرض أرشيف العناوين:

من وجهة نظر CSS ، أفهم سبب حدوث ذلك ، لكنني كنت كسولًا جدًا بحيث لا يمكنني التفكير في الإصلاح. كان علي فقط أن أرفض إظهار كتلة الشريط الجانبي العائمة هذه على مثل هذه الصفحات (ليست هناك حاجة إليها).