刷新javascript頁面而不刷新HTML，但是隨着窗口寬度的變化

Question

當我滾動時，導航欄的不透明度發生變化，並且其更改的速率取決於窗口的寬度。一旦頁面加載，我試着改變寬度，但不透明度變化率仍然是相同的。有沒有辦法讓不透明度變化率參數在不刷新頁面的情況下自動更改？

if ($(window).width() > 1060) { 
    fadenumber = 500; 
} 
else if ($(window).width() > 800){ 
    fadenumber = 600; 
} 
else if ($(window).width() > 600){ 
    fadenumber = 400; 
} 
else { 
    fadenumber = 200; 
} 

$(document).on('scroll', function() { 
    $('.navbar').css('opacity', ($(document).scrollTop()/fadenumber)); 
    var fadeStart=0 ,fadeUntil=fadenumber; 
     var offset = $(document).scrollTop(),opacity=0 
     ; 
     if(offset<=fadeStart){ 
      opacity=1; 
     }else if(offset<=fadeUntil){ 
      opacity=1-offset/fadeUntil; 
     } 
     $('.icon').css('opacity',opacity).html(opacity); 
}); 

謝謝

Answer 1

有當窗口或DOM對象被調整的事件。

所以你可以創建一個事件監聽器來做到這一點。

以下是如何獲取大小並添加偵聽器。 （另外這裏有一個更深入的jsfiddle我寫這個：http://jsfiddle.net/snlacks/65mL7btd/）

var outputDiv = $('#outputjq'); 

function callback(){ 
    outputDiv.html(window.innerWidth); 
} 

$(window).on('resize', callback); 

callback(); 

，如果你想改變的速度，你可以增加回調內部的速度。調整大小後

function callback2(){ 
    if ($(window).width() > 1060) { 
     fadenumber = 500; 
    } 
    else if ($(window).width() > 800){ 
     fadenumber = 600; 
    } 
    else if ($(window).width() > 600){ 
     fadenumber = 400; 
    } 
    else { 
     fadenumber = 200; 
    } 
} 

var fadenumber; 

$(window).on('resize', callback2); 

callback2(); 

Answer 2

if ($(window).width() > 1060) { 
    fadenumber = 500; 
} 
else if ($(window).width() > 800){ 
    fadenumber = 600; 
} 
else if ($(window).width() > 600){ 
    fadenumber = 400; 
} 
else { 
    fadenumber = 200; 
} 

changeOpacityRate(); 

$(document).on('scroll', function() 
{ 
    changeOpacityRate(); 
}); 

function changeOpacityRate() 
{ 
    $('.navbar').css('opacity', ($(document).scrollTop()/fadenumber)); 
    var fadeStart=0 ,fadeUntil=fadenumber; 
    var offset = $(document).scrollTop(),opacity=0 ; 
    if(offset<=fadeStart) 
    { 
     opacity=1; 
    } 
    else if(offset<=fadeUntil) 
    { 
     opacity=1-offset/fadeUntil; 
    } 
    $('.icon').css('opacity',opacity).html(opacity); 
} 

Answer 3

var onScroll; 
$(document).on('scroll', onScroll = function() { 
    $('.navbar').css('opacity', ($(document).scrollTop()/fadenumber)); 
    var fadeStart=0 ,fadeUntil=fadenumber; 
     var offset = $(document).scrollTop(),opacity=0 
     ; 
     if(offset<=fadeStart){ 
      opacity=1; 
     }else if(offset<=fadeUntil){ 
      opacity=1-offset/fadeUntil; 
     } 
     $('.icon').css('opacity',opacity).html(opacity); 
}); 
$(document).on('resize', function() { 
if ($(window).width() > 1060) { 
     fadenumber = 500; 
    } 
    else if ($(window).width() > 800){ 
     fadenumber = 600; 
    } 
    else if ($(window).width() > 600){ 
     fadenumber = 400; 
    } 
    else { 
     fadenumber = 200; 
    } 
onScroll(); 
}); 

[你應該讓變量全球第一]

解釋將檢查寬度。 您可以將調整大小的函數代碼（不帶onScroll（）;）複製到滾動函數中，以便在文檔滾動時也檢查寬度。

編輯

你可以把（）函數的onResize後確保，變量將被設置在文件準備好（你可以把所有的$（document）。就緒（）），這樣：

$(document).ready(function(){  
var onResize; 
    $(document).on('resize', onResize = function() { 
    if ($(window).width() > 1060) { 
      fadenumber = 500; 
     } 
     else if ($(window).width() > 800){ 
      fadenumber = 600; 
     } 
     else if ($(window).width() > 600){ 
      fadenumber = 400; 
     } 
     else { 
      fadenumber = 200; 
     } 
    }()); //() to launch function right after it's declared 
});