كتل صفحة ثابتة (ويبقى ثابت على نافذة التمرير) باستخدام CSS فقط

وهذا قد يكون آخر مثال جيد لعبارة "الجدة التدريس لامتصاص البيض" ... هذا هو السبب الأساسي فقط CSS السخافات. لكن بالنسبة لأولئك، مثل لي غافل، وهذا قد يكون نعمة مقنعة. كنت أعتقد دائما (أنا يمكن أن يفقد وظيفتي لقوله هذا)، كان من الممكن الوحيد للحفاظ على جزء من محتوى صفحة HTML ثابتة (معنى، وموقفه لا يزال كما هو في تمرير النافذة)، وذلك باستخدام بعض النصوص الذكية، وتفعل كل تلك العلمية الحسابات لإيجاد موقف ديناميكي، محاصرة الأحداث وتحديد مهلة Window.scroll الخ

لم أفكر يمكن أن بسيطة مثل هذا .... هنا في أقل من المغلق / HTML، ولدي أربع كتل جامدة، واحدة ثابتة على كل extrimities من الصفحة، أعلى، يمين، أسفل وإلى اليسار ... وغني عن القول ... يمكنك اختيار أي واحد أو أكثر إذا اقتضى الأمر ...

CSS
. ثابت {العرض: كتلة؛ Z-الفهرس: 10؛ اللون: # FFFFFF؛ تجاوز-X: خفي؛ تجاوز ص: خفية؛ الموقف: ixed؛
}
محتويات # {هامش: 100px 150px 160px 0px؛ الحدود: 1px الصلبة # e6e6e6}

# لف-T {الأعلى: 0px؛ خلفية: # 33CC66؛ العرض: 100٪؛ الطول: 55px؛}

# الختامية ل {الأعلى: 80px؛ خلفية: # FF9966؛ الطول: 300px؛ العرض: 150px؛ الحدود: 2px الصلبة # e6e6e6؛}

# الختامية ب {أسفل: 0px؛ خلفية: # 3333CC؛ العرض: 100٪؛ الطول: 55px؛}

# لف-R {الأعلى: 80px؛ الخلفية: # 6666FF؛ الطول: 300px؛ العرض: 140px؛ الحدود: 2px الصلبة # e6e6e6؛ حق: 0؛}

HTML
id="contents"> <div أنت محتويات الصفحة الرئيسية </ div> المصدر:
<div id="wrap-b" class="static">
ثابت المحتوى في أسفل الصفحة
</ div> المصدر:
<div id="wrap-t" class="static">
ثابت المحتوى على أعلى الصفحة
</ div> المصدر:

<div id="wrap-l" class="static">
غادر محتوى ثابت في الصفحة
</ div> المصدر:
<div id="wrap-r" class="static">
ثابت المحتوى على حق الصفحة
</ div> المصدر:

عرض عينة wroking هنا


ترك الرد

NDK الرئيسية | معربا عن تكنولوجيا المعلومات | الحنك تعرب | Penmenship تعرب | الرهبة تعرب | تعرب عن نفسي