2個不同的div ID上的固定位置

Question

我有一個頁面，需要2個div才能在某個滾動發生後獲得固定位置。問題是我需要爲每個代碼使用2個不同的代碼，因爲我不能將它們放在同一個div上。

這是我使用的jQuery代碼。

<script> 
$(document).ready(function() { 
    if (window.XMLHttpRequest) { 
    window.onscroll = function() { 
     if ($('body').scrollTop() > 534 || $('html').scrollTop() > 534) { 
      if ($(window).height() > 20) { 
       $('#wrappernav').addClass('wrappernavstatic'); 
      } 
     } 
     else { 
      $('#wrappernav').removeClass('wrappernavstatic'); 
     } 
    }; 
    } 
}); 

，我需要添加另一格但250像素，另外一個。但是，當我把兩者都放在同一頁面上時，它會發生衝突，只有第二個正在處理第一個細節。

<script> 
$(document).ready(function() { 
    if (window.XMLHttpRequest) { 
    window.onscroll = function() { 
     if ($('body').scrollTop() > 300 || $('html').scrollTop() > 300) { 
      if ($(window).height() > 20) { 
       $('#wrappernavfilter').addClass('wrappernavfilterstatic'); 
      } 
     } 
     else { 
      $('#wrappernavfilter').removeClass('wrappernavfilterstatic'); 
     } 
    }; 
    } 
}); 

如何我都混他們是活躍的？

Answer 1

您可以使用.scroll()綁定兩種處理：

$(window).scroll(function() { 
    // ... 
}); 

而不是被限於1 window.onscroll：

window.onscroll = function() { 
    // ... 
}; 

因此，對於第一個片段在你的問題：

<script> 
$(document).ready(function() { 
    if (window.XMLHttpRequest) { 
     $(window).scroll(function() { 
      if ($('body').scrollTop() > 534 || $('html').scrollTop() > 534) { 
       if ($(window).height() > 20) { 
        $('#wrappernav').addClass('wrappernavstatic'); 
       } 
      } 
      else { 
       $('#wrappernav').removeClass('wrappernavstatic'); 
      } 
     }); 
    } 
});