フッタにオーバーラップする固定要素

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'); 
    } 
}); 

と、次のように2つの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' 
     }); 
    } 
});