لا يدعم متصفح IE6 ، الذي تم إنتاجه على نطاق واسع في عام 2002 ، وهو التيار الرئيسي في بلدي ، سمة تحديد المواقع الثابتة لـ CSS2.
1. الحل ل JS العادية
هذا هو الأقدم والاستخدام على نطاق واسع. العيب هو أن عناصر شريط التمرير السحب تتعلق بشدة. ومع ذلك ، من المهم أن نقول أنه على الرغم من أن هذا الحل له تأثير بصري ضعيف ، إلا أن الاستقرار لا يجب ذكره.
2. استخدم بنية HTML وطريقة محاكاة التصميم
تم تطبيق هذا الحل مرة واحدة من قبل 163 مدونة. ولاية . المبدأ: لا يكون شريط التمرير الذي تسحبه هو الصفحة بأكملها ، ولكن الحاوية التي تحاكي الصفحة بأكملها ، وبالتالي فإن المكان خارج الحاوية "لا يزال". مفصل:
ما يلي هو المحتوى المقتبس: <! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<style>
*{الهامش: 0}
جسم{
الارتفاع: 1000px ؛
العرض: 1000px ؛
}
#أ {
العرض: 300 بكسل ؛
الارتفاع: 100px ؛
الخلفية: أحمر.
}
</style>
<script>
var isie6 = window.xmlHttPrequest؟ false: true ؛
window.onload = function () {
var a = document.getElementById ('a') ؛
var d = document.getElementById ('d') ؛
إذا (isie6) {
A.Style.position = 'aboort' ؛
window.onscroll = function () {
d.innerhtml = '' ؛
}
}آخر{
A.Style.position = 'ثابت' ؛
}
A.Style.Right = '0' ؛
A.Style.Bottom = '0' ؛
}
</script>
</head>
<body>
<div id = "d" style = "display: none ؛"> </viv>
<div id = 'a'> اختبار </div>
</body>
</html> |
هنا التأثير البصري مثالي ، هناك ثلاث مشاكل:
1. بحاجة إلى تغيير بنية HTML (لم يتم شرح هذا العنصر)
2. تدمير تجربة المستخدم: لقد جربت هذه الطريقة من قبل ، لكن عندما أقوم بتحديث الصفحة ، لن يبقى شريط التمرير في مكانه ، وهو ما لا يمكنني تحمله.
3. تدمير بعض الأحداث من JS.
3. حل "طريقة المقاصة" غير المسبوقة لطريقة المريخ
المبدأ غريب حقًا ، لا يمكنني شرح ذلك ، وقيود التطبيق كبيرة جدًا. انظر الأمثلة:
ما يلي هو المحتوى المقتبس: <! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<style>
*{الهامش: 0}
جسم{
الارتفاع: 1000px ؛
العرض: 1000px ؛
}
#أ {
العرض: 300 بكسل ؛
الارتفاع: 100px ؛
الخلفية: أحمر.
}
</style>
<script>
var isie6 = window.xmlHttPrequest؟ false: true ؛
window.onload = function () {
var a = document.getElementById ('a') ؛
var d = document.getElementById ('d') ؛
إذا (isie6) {
A.Style.position = 'aboort' ؛
window.onscroll = function () {
d.innerhtml = '' ؛
}
}آخر{
A.Style.position = 'ثابت' ؛
}
A.Style.Right = '0' ؛
A.Style.Bottom = '0' ؛
}
</script>
</head>
<body>
<div id = "d" style = "display: none ؛"> </viv>
<div id = 'a'> اختبار </div>
</body>
</html> |
4. التعبير حديثًا وحل الخلفية الثابتة للتكنولوجيا القديمة
يمكن أن يدرك هذا الحل بصريًا تحديد موقع ثابت. مثال:
CloudGamer: تأثير طبقة التنبيه المنبثقة (مربع موجه المعلومات) تأثير
السابق الخاص بي: "حل قناع شفاف بسيط (Lightbox)
