使功能在特定的寬度上工作

Question

我想使此功能僅在屏幕尺寸高於1024像素時才起作用。

//Parallax background image 
    var velocity = 0.5; 
    function update(){ 
     var pos = $(window).scrollTop(); 
     $('.parallax').each(function() { 
      var $element = $(this); 
      var height = $element.height(); 
      $(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px'); 
     }); 
    };$(window).bind('scroll', update); update(); 

這是我試圖做：

//Parallax background image 
    var velocity = 0.5; 
    $(window).on("ready resize", function() { 
    if ($(window).width() < 770) { 

    function update(){ 
     var pos = $(window).scrollTop(); 
     $('.parallax').each(function() { 
      var $element = $(this); 
      var height = $element.height(); 
      $(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px'); 
     }); 
    };});$(window).bind('scroll', update); update(); 

我真的不知道我在做什麼錯？

Answer 1

您沒有說明什麼問題你重新來過是。如果它是「我的代碼不起作用」，那麼也許你應該首先檢查你的語法。你的大括號搞砸了。

//Initialize velocity and empty update function 
var velocity = 0.5; 
var update = function() {}; 

//When window is ready (content loaded) OR resized, execute the following function 
$(window).on("ready resize", function() { 
    if ($(window).width() >= 1024) { //Check if window width is 1024px wide or larger 
     update = function() { //Set update to run this function when executed. 
      var pos = $(window).scrollTop(); //Get scrollbar position https://api.jquery.com/scrollTop/ 

      //For each element with 'parallax' class, execute the following function 
      $('.parallax').each(function() { 
       var $element = $(this); //Get the current parallax-classed element 
       var height = $element.height(); //Save the current height of this element 

       //Set the CSS of this parallax-classed element set the background position 
       $(this).css('background-position', '40% + ' + Math.round((height - pos) * velocity) + 'px'); 
      }); 
     }; 
    } else { //Execute if screen width is < 1024px 
     update = function() {}; //Set update to do nothing 
    } 
}); 

//When window is scrolled through, run the update function 
$(window).bind('scroll', update); 
//update(); 

最後一行是不必要的，因爲resize將處理函數值，並且scroll將處理的執行。

您在background-position設置中丟失了+或-。

因此，例如，如果您的Math.round()的結果是「30」，那麼Javascript會將該行解釋爲$(this).css('background-position', '40%30px');，這顯然會導致問題。我相信你想要它說一些像$(this).css('background-position', '40% + 30px');。