Ekran yeniden boyutlandırıldığında javascript güncelleştirmesi

Question

Kullanıcının ne kadar kaydığıyla ilgili olarak nav arka planımın rengini değiştirmesine izin veren bazı javascript kullanıyorum. Tamamen gayet iyi çalışıyor, ancak java komut dosyasının ekran boyutu her değiştiğinde güncellenmesiyle ilgili bir sorun yaşıyorum, çünkü bağlantıyı doğru yapmak için her yeniden boyutta sayfayı yenilemeliyim. Çapa arasındaki bazı boşlukların yüzdeye dayandığına inanıyorum, bu nedenle site yeniden boyutlandırıldığında her zaman yükseklik değişiyor, ancak javascript bunu okuyor.

$(document).ready(function(){  
     var scroll_start = 0; 
     var firstchange = $('.anchor'); 

    var f_offset = firstchange.offset(); 

    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if(scroll_start > f_offset.top) { 
      $('.nav').css('background-color', '#fff'); 
     } 
     else { 
      $('.nav').css('background-color', '#000'); 
     } 

    }); 

Answer 1

Sen pencere yeniden boyutlandırıldığında sonra bir işlevi tetikleyecek ekran boyutunda bir değişiklik tespit etmek için pencereye bir olay dinleyicisi ekleyebilir.

Nasıl çalıştığını gösteren jsfiddle demo here konusuna bakın.

window.addEventListener("resize", winResize); 

function winResize(){ 

    var scroll_start = 0; 
    var firstchange = $('.anchor'); 
    var f_offset = firstchange.offset(); 

    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if(scroll_start > f_offset.top) { 
      $('.nav').css('background-color', '#fff'); 
     } 
     else { 
      $('.nav').css('background-color', '#000'); 
     } 
    }); 
} 

Answer 2

window.addEventListener("resize", winResize); 

fonksiyon winResize() {

var scroll_start = 0; 
var firstchange = $('.anchor'); 
var f_offset = firstchange.offset(); 

$(document).scroll(function() { 
    scroll_start = $(this).scrollTop? document.documentElement.scrollTop:document.body.scrollTop(); 
    if(scroll_start > f_offset.top) { 
     $('.nav').css('background-color', '#fff'); 
    } 
    else { 
     $('.nav').css('background-color', '#000'); 
    } 
}); 

}