Fester Elementüberlappung in Fußzeile

Question

Ich versuche zu verhindern, dass sich ein Bildlaufelement in der Fußzeile einer Website überschneidet. Ich habe es so verstanden, dass es sich am oberen Rand der Seite eines bestimmten Elements nicht überlappt, aber es überlappt immer noch die Fußzeile.

Hier ist der Code, den ich zur Zeit an der richtigen Stelle:

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

und die beiden div-Elemente sind wie folgt:

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

jede mögliche Hilfe würde geschätzt.

Danke!

Answer 1

diese

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