固定元素重疊到頁腳

Question

我試圖防止滾動元素重疊到頁腳在網站上。我已經知道它在某個元素的頁面頂部不重疊的位置，但它仍然與頁腳重疊。

這裏是我目前已經制定代碼：

// fix the orange box to the top after scrolling a certain amount 
$(window).scroll(function() { 
    // get the scroll position top 
    var window_pos = $(window).scrollTop(); 

    // fix the element on scroll 
    if (window_pos >= $('#sticky').offset().top) { 
     $('#suggestions').attr('style', 'position: fixed; top: 0px;'); 


     // prevent overlapping into the footer 
     if (window_pos >= $('#sticky2').offset().top || window_pos >= $('.footer').offset().top) { 
      alert("exceeded"); 
      $('#suggestions').attr('style', 'position: absolute'); 
     } else { 
      // restore fixed position 
      if ($(document).scrollTop() + window.innerHeight < $('#sticky2').offset().top) { 
       $('#suggestions').attr('style', 'position: fixed; top: 0px;'); 
      } 
     } 
    } else if (window_pos < $('#sticky').offset().top - 20) { 
     $('#suggestions').attr('style', 'position: absolute'); 
    } 
}); 

和兩個div元素如下：

<div id="sticky" style="height: 20px; margin-top: 5px; visibility: hidden;"></div> 
<div id="sticky2" style="height: 50px; margin-top: 10px; visibility: hidden;"></div> 

任何幫助，將不勝感激。

謝謝！

Answer 1

試試這個

$(window).scroll(function() { 
    // get the scroll position top 
    var window_pos = $(window).scrollTop(); 

    // fix the element on scroll 
    if (window_pos >= $('#sticky').offset().top) { 
     $('#suggestions').css({ 
      'position': 'fixed', 
      'top': '0px' 
     }); 


     // prevent overlapping into the footer 
     if (window_pos >= $('#sticky2').offset().top || window_pos >= $('.footer').offset().top) { 

      $('#suggestions').css({ 
       'position': 'static', 
       'top': 'auto' 
      }); 
     } else { 
      // restore fixed position 
      if ($(document).scrollTop() + window.innerHeight < $('#sticky2').offset().top) { 
       $('#suggestions').css({ 
        'position': 'fixed', 
        'top': '0px' 
       }); 
      } 
     } 
    } else if (window_pos < $('#sticky').offset().top - 20) { 
     $('#suggestions').css({ 
      'position': 'static', 
      'top': 'auto' 
     }); 
    } 
});