根據屏幕大小阻止腳本執行

我目前正試圖阻止對小於769px的屏幕執行以下Javascript。我是一個完全的JavaScript新手，這個腳本是從一個Codrops教程如何動畫頭上滾動。我做了一個小修改，允許我使用圖像。原始腳本僅用於文本元素。這是稍微修改後的整個腳本。根據屏幕大小阻止腳本執行

var cbpAnimatedHeader = (function() { 

var docElem = document.documentElement, 
    header = document.querySelector('.header-outer'), 
    logo = document.querySelector('.logo') 
    didScroll = false, 
    changeHeaderOn = 300; 




function init() { 
    window.addEventListener('scroll', function(event) { 
     if(!didScroll) { 
      didScroll = true; 
      setTimeout(scrollPage, 250); 
     } 
    }, false); 
} 



    function scrollPage() { 
     var sy = scrollY(); 
     if (sy >= changeHeaderOn) { 
      classie.add(header, 'header-shrink'); 
      classie.add(logo, 'logo-shrink'); 
     } 
     else { 
      classie.remove(header, 'header-shrink'); 
      classie.remove(logo, 'logo-shrink'); 
     } 
     didScroll = false; 
    } 



function scrollY() { 
    return window.pageYOffset || docElem.scrollTop; 
} 

init(); 

})();

我沒有看到StackOverflow上別人問過類似的問題，但是這是給他的解決方案（if ($(window).width() > 768) {）至今還沒有工作對我來說，我相信，我錯誤地應用它。

任何幫助，將不勝感激:)

來源

2013-12-17 Nillansan

'$（window）.width（）'是[jQuery]（http://jquery.com/）。 jQuery是一個JavaScript庫。如果你不使用它，那麼這段代碼就不會做任何事情。 –

@PaulD.Waite，但拋出'ReferenceError：$未定義' – C5H8NNaO4

@ C5H8NNaO4：是的，非常真實：這就是它會做的。 –

原因

$(window).width()

工作不適合你，因爲它使用jQuery，這你不使用它似乎。

而是使用：

window.innerWidth

所以，這樣做：

if (sy >= changeHeaderOn && window.innerWidth > 768 ) { 
    classie.add(header, 'header-shrink'); 
    classie.add(logo, 'logo-shrink'); 
}

來源

2013-12-17 11:20:22 Niall

是的，這是相當尷尬的，我爲疏忽道歉，我會嘗試你的建議謝謝:) – Nillansan

尼爾，請原諒我的新手，我已經嘗試了你的建議，但我似乎無法使它的工作，頭和標誌的尺寸仍然在768px以下。你將如何將它應用於上面的腳本？ – Nillansan

@Nillansan所以你基本上不想運行'classie.add（header，'header-shrink'）; classie.add（logo，'logo-shrink'）;'如果寬度小於768是吧？ – Niall

試試這個JS，

window.outerWidth,

您可以檢查通過的console.log所有窗口關聯的對象（窗口）。

來源

2013-12-17 11:27:58 MackMon

根據屏幕大小阻止腳本執行

回答

相關問題