画面のサイズ変更時にjavascriptを更新

Question

javascriptを使用しているため、ユーザーのスクロール量に応じて色を変更することができます。これは完全にうまく動作しますが、画面サイズが変更されるたびにJavaスクリプトが更新される方法を見つける際に問題があります。アンカーを正しく動作させるためには、すべてのサイズでページを更新する必要があります。私は、アンカーの間のdivのいくつかはパーセンテージに基づいていると信じて、高さはサイトのサイズを変更するたびに変更されますが、JavaScriptはそれを読んでいません。

$(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

あなたは、ウィンドウのサイズが変更されたとき、関数をトリガする、画面サイズの変化を検出するために、ウィンドウにイベントリスナーを追加することができます。

jsfiddle demo hereを参照してください。

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); 

関数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'); 
    } 
}); 

}