كيفية إنشاء تذييل مثبت فقط CSS
عادة ، نحن بحاجة إلى جافا سكريبت ل أداء آثار التمرير المتعلقة بإجراءات المستخدم المختلفة على صفحات الويب. البرنامج النصي يقوم بعمل تتبع المسافة التي يستغرقها التمرير لأعلى أو لأسفل في الصفحة, و يطلق العمل عندما يتم الوصول إلى ارتفاع العتبة.
لا يعد استخدام جافا سكريبت لتأثيرات التمرير أمرًا سيئًا بشكل خاص. في الواقع ، هناك حالات أكثر تعقيدًا المستحيل حلها دون جافا سكريبت. ومع ذلك هناك الخارقة المغلق يمكن أن تحل محل هذه البرامج النصية في بعض الأحيان.
هذا المنشور سوف يظهر لك هوث لإنشاء تذييل الصفحة يكشف عن تأثيرات على تمرير الصفحة باستخدام CSS. سنستخدم حالتين للاستخدام لإظهار ذلك: واحدة للصفحة بأكملها (راجع العرض التوضيحي) وواحدة لعناصر الصفحة الفردية ، مثل المقالات.
صفحة كاملة
نحن بحاجة إلى إنشاء تذييل ذلك يظهر من أسفل الصفحة بينما يقوم المستخدم بالتمرير لأسفل. أيضًا ، عندما يتم تمرير الصفحة احتياطيًا ، يحتاج التذييل إلى ذلك أن تكون مخفية أسفل الصفحة مرة أخرى.
لتحقيق هذا الهدف ، أولا علينا إنشاء تذييل مع موقف ثابت في الجزء السفلي من الشاشة.
1. إنشاء تذييل ثابت
دعونا إضافة بعض المحتوى وتذييل الصفحة إلى الصفحة الأولى. أنا أستخدم علامات HTML في العرض التوضيحي الخاص بي ، تظهر صورة مضرب داخل تذييل الصفحة للحصول على تأثير غير مرعب ، ولكن يمكنك اختيار أي صورة أخرى تريدها. أبجد هوز دولور الجلوس امات… الانتقال إلى CSS, إزالة أي مساحة حول ال إعطاء بعض الأبعاد ( تطبيق لون كل من تعيين بهذه الطريقة سيكون هناك مساحة كافية في الأسفل لتذييل الصفحة أن تكون واضحة عندما يقوم المستخدم بالتمرير لأسفل الصفحة. هذا هو. يتم تذييل كشف تأثير صفحة ويب كاملة. تحقق من Codepen التجريبي أدناه. يمكن استخدام هذه التقنية لعنصر HTML فردي (مع تذييل) فترة كافية للحصول على تأثير صفحة التمرير المناسب. هذه الطريقة مخترقة بعض الشيء ، حيث أنها لا تعمل حاليًا في Chrome و IE ، ولكن لديها تراجع مناسب. أولاً ، دعنا ننشئ مقالة طويلة مع تذييل الصفحة. لتعزيز رمز الدلالي ، اخترت أبجد هوز دولور الجلوس امات… أدناه تستطيع أن ترى التصميم الأساسي من المادة وتذييل الصفحة. مقالي يبدو حاليا مثل هذا. بالطبع يمكنك استخدام قواعد النمط الأساسية الأخرى كذلك. تم إصلاح تذييل السابق ، هذا واحد سوف كن لزجة. تطبيق ال يمكنك ضبط قيمته وفقًا لذوقك ، حيث إنه يحدد النقطة التي يبدأ بها تذييل الصفحة في الظهور أو الاختفاء أثناء قيام المستخدم بالتمرير لأسفل أو لأعلى. أعط نفس القيمة للهامش السفلي للمادة, بحيث سيكون هناك مساحة كافية في الجزء السفلي للكشف عن تذييل كامل. الآن نحن بحاجة فتح المقبل الجزء السفلي من المقال من خلالها يمكننا أن نرى تذييل لزجة التمرير لأسفل وأعلى. لتحقيق ذلك ، استبدال ال وأخيرا ، دعونا ضع تذييل الصفحة وراء المقال باستخدام وهذا كل شيء ، يتم تنفيذ عنصر الصفحة الفردي مع تأثير الكشف على التمرير. تحقق من القلم Codepen أدناه. يمكنك أيضًا العثور على حالتَي الاستخدام على صفحة جيثب الخاصة بنا. و للدلالات. ومع ذلك,
استمر في التمرير حتى ترى تذييل الصفحة
علامة بواسطة تحديد الهوامش إلى 0, وجعلها طويلة بما فيه الكفاية من قبل مضيفا ارتفاع مخصص للحث على التمرير (إذا كان محتوى النص الموجود في صفحتك طويلًا بما يكفي للتسبب في التمرير ، فلا يلزمك رفعه).عرض و ارتفاع) إلى تذييل الصفحة ، و إصلاح موقفها إلى أسفل الشاشة مع الموقف: ثابت. و أسفل: 0 ؛ الخصائص. body font-family: Crimson Text؛ حجم الخط: 13pt ؛ الهامش: 0 footer width: 100٪؛ الارتفاع: 200 بكسل ؛ الموقف: ثابت. أسفل: 0 ؛ لون الخلفية: # DD5632 ؛
2. إخفاء تذييل الصفحة
ض مؤشر: -1 حكم على تذييل من أجل ضعه خلف كل العناصر الأخرى على الصفحة. و علامات بيضاء من أجل تغطية تذييل. body، html background-colour: #fff؛ footer width: 100٪؛ الارتفاع: 200 بكسل ؛ الموقف: ثابت. أسفل: 0 ؛ لون الخلفية: # DD5632 ؛ مؤشر z: -1 ؛
3. ضبط الهامش السفلي
الهامش السفلي من بطاقة يساوي ارتفاع تذييل الصفحة (في مثالي 200 بكسل). الجسم الارتفاع: 1000 بكسل ؛ الهامش: 0 الهامش السفلي: 200 بكسل ؛
عناصر الصفحة الفردية
1. إنشاء مقال طويل
و .
المادة 1
مقالة width: 500px؛ لون الخلفية: # FEF9F3. الحشو: 20px 40px. article> تذييل الصفحة height: 100px؛ لون الخلفية: # FE0178 ؛ الجسم font-family: cormorant garamond؛
2. جعل تذييل لزجة
الموقف: لزجة حكم على تذييل الصفحة ، لذلك سوف تتحرك داخل حدود المادة ولكن لا يزال الحفاظ على موقفها على الشاشة أثناء قيام المستخدم بالتمرير لأعلى ولأسفل. article> footer height: 100px؛ لون الخلفية: # FE0178 ؛ موقف: -wkkit- لزجة. الموقف: لزجة. القاع: 80 بكسل ؛
أسفل: 80px حكم إصلاح موقف تذييل الصفحة 80px أعلاه أسفل المقالة. مقالة width: 500px؛ لون الخلفية: # FEF9F3. الحشو: 20px 40px. الهامش السفلي: 80 بكسل ؛
3. إضافة خلفية شفافة جزئيا
لون الخلفية من المادة مع الخطي التدرج الصورة الخلفية, الذي من أعلى المقالة إلى أعلى تذييل الصفحة هو الملونة مع لون الخلفية من المادة ، والجزء المتبقي إلى أسفل هو جعلها شفافة. مقالة width: 500px؛ الحشو: 20px 40px. صورة الخلفية: التدرج الخطي (إلى الأسفل ، # FEF9F3 calc (100٪ - 120 بكسل) ، شفاف 0) ؛ الهامش السفلي: 80 بكسل ؛
احسب (100٪ -120px) وظيفة المغلق بحساب الارتفاع الكامل للمادة ناقص تذييل الصفحة. في المثال الخاص بي ، تبلغ 120 بكسل (100 بكسل للارتفاع) + 20px للحشو).
4. ضع تذييل الظهر
مؤشر z: -1 حكم CSS. article> footer height: 100px؛ لون الخلفية: # FE0178 ؛ موقف: -wkkit- لزجة. الموقف: لزجة. القاع: 80 بكسل ؛ مؤشر z: -1 ؛
