jQuery：基於窗口寬度/媒體查詢禁用腳本

Question

我有下面的jQuery腳本，觸發div變成浮動固定。 （這是工作，我沒有問題）。

$(document).ready(function() { 
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0)); 
}); 
$(window).scroll(function (event) { 
    // what the y position of the scroll is 
    var y = $(this).scrollTop(); 
    var abottom = $('#individual_second_tier').offset().top - parseFloat($('#individual_second_tier').css('margin-top').replace(/auto/, 0)); 

    // whether that's below the form 
    if (y >= ctop) { 
     // if so, ad the fixed class 
     $('#comment').addClass('fixed'); 
     if (y > abottom-$('#comment').height()){ 
      $('#comment').offset({'top': abottom-$('#comment').height()-y}); 
     } 
     else 
     { 
      $('#comment').offset({'top': 0 }); 
     } 
    } else { 
     // otherwise remove it 
     $('#comment').removeClass('fixed'); 
    } 
    var newWidth = $('#comment').parent().width(); 
    $('#comment').width(newWidth); 

    }); 

你可以看到它在行動here。它是右側灰色方框中的「投票」

我的網站反應靈敏，所以當它下降到768像素以下時，投票div在博客內容下移動。所以在瀏覽器寬度方面，這個腳本工作的很好，但是當我調整它的大小時，輪詢div就會失控。

對於jQuery，我是完整的noob - 我是一個優秀的複製貼圖 - 但我想象在現有腳本中有一種奇特的方式來指示它在匹配媒體查詢時禁用它或瀏覽器寬度，以便我可以擺脫固定浮動div功能。

如果任何人想要一個本地副本混在一起，here is a zip file與HTML文件（類型將關閉，因爲我使用的是網頁字體）。

Answer 1

沒有Stack Overflow帳戶的人看到了我的問題，並通過電子郵件提供了答案。這是一個非常簡單的解決方案。只需添加到現有的代碼：

if ($(window).width() > 768) { 

最後的代碼塊看起來是這樣的：

$(document).ready(function() { 
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0)); 
}); 
$(window).scroll(function (event) { 

    if ($(window).width() > 768) { 

     // what the y position of the scroll is 
     var y = $(this).scrollTop(); 
     var abottom = $('#individual_second_tier').offset().top - parseFloat($('#individual_second_tier').css('margin-top').replace(/auto/, 0)); 

     // whether that's below the form 
     if (y >= ctop) { 
      // if so, ad the fixed class 
      $('#comment').addClass('fixed'); 
      if (y > abottom-$('#comment').height()){ 
       $('#comment').offset({'top': abottom-$('#comment').height()-y}); 
      } 
      else 
      { 
       $('#comment').offset({'top': 0 }); 
      } 
     } else { 
      // otherwise remove it 
      $('#comment').removeClass('fixed'); 
     } 
     var newWidth = $('#comment').parent().width(); 
     $('#comment').width(newWidth); 
    } 
}); 

我測試了所有在這裏提供的其他的答案，但沒有工作的正確途徑。非常感謝您的幫助。

Answer 2

我前一段時間所面臨的同樣的問題，這是我如何解決它：

需要時設置的媒體查詢隱藏元素：

/* Somewhere above... */ 
div#toHide { display: block; /* ... */ } 

@media (min-width: 800) { 
    div#toHide { display: none; } 
} 

然後在我的js文件我創建了這樣一個功能：

function isDivVisible() { 
    return $('div#toHide').is(':visible'); 
} 

現在我的方法，我不想執行所有的代碼，如果用戶將無法看到它：

function someHugeFunction() { 
    if(isDivVisible()) { 
     // some crazy stuff here. 
    } 
} 

我不知道這是優雅與否，這工作我。

Answer 3

你能不只是強制投票的位置相對的，而不是固定在使用媒體查詢指定的屏幕尺寸？

@media (min-width: 768) { 
    #comment { 
     position: relative !important; 
     top: 0 !important; 
    } 
} 

或者，你可以在函數中使用jQuery

​​

Answer 4

大概是這樣的：

$(window).resize(function(){ 
    if($(this).width() <= 768) { 
    $('foo').removeClass('bar') //whatever css class is doing the undesired effect at breakpoint 
    } 
}); 

Answer 5

matchMedia可能是你在找什麼：http://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

添加這樣的事情你的滾動功能之外：

var isWide, 
    width768Check = window.matchMedia("(min-width: 768px)"); 

width768Check.addListener(setWidthValue); 
function setWidthValue (mediaQueryList) { 
    isWide = width768Check.matches; 
} 
isWide = width768Check.matches; 

$(window).resize(function(){ 
    if (isWide) { 
     $('#comment').addClass('fixed'); 
    } else { 
     $('#comment').removeClass('fixed'); 
    } 
}); 

，然後在滾動

if (y >= ctop && isWide) { 
... 
} 

並不完美，但確實的伎倆。調整窗口大小時，resize（）函數將適當地添加/刪除固定類。