إصلاح الكائنات الثابتة في تذييلات الصفحة

المشكلة الشائعة المتمثلة في تمرير الكائنات الثابتة فوق التذييلات لها حل بسيط. على سبيل المثال، لنفكر في مربع "مشاركة" ثابت في الزاوية اليسرى السفلية من الشاشة. لمنعه من تداخل التذييل، سنوقفه بحوالي 10 بكسل فوق التذييل.

أولاً، نحتاج إلى تحديد قرب المربع من التذييل في كل مرة يتم فيها تمرير الصفحة:

$(document).scroll(function() {
    checkOffset();
});

إذا اقترب المربع كثيرًا من التذييل (أي في حدود 10 بكسل)، فسنغير موضعه إلى مطلق:

function checkOffset() {
    if($('#social-float').offset().top   $('#social-float').height() 
                                           >= $('#footer').offset().top - 10)
        $('#social-float').css('position', 'absolute');
    if($(document).scrollTop()   window.innerHeight 
لاحظ أن أصل #social-float يجب أن يكون شقيقًا للتذييل في بنية HTML.