调整屏幕大小时的javascript更新

我使用了一些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');
       }

   });

---

您可以向窗口添加事件侦听器，以检测屏幕大小的变化，然后在调整窗口大小时触发函数

请参见演示其工作原理

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

函数winResize（）{

---

}

旧版本的IE可能需要这样做。（文档）。documentElement.scrollTop？document.documentElement.scrollTop:document.body.scrollTop@Sparky256 tbh我不是100%确定。如果你认为我遗漏了什么，请随意编辑答案out@Paul. 我不知道这是否更好，只是我使用相同的代码（加上scrollLeft）来测量页面的滚动位置。对我来说，这只是一个测试其他例程的诊断例程。我也不确定，但这两种方法都应该根据用户的要求工作！很好的工作：-）下面的答案有用吗？不，我不能让它工作不幸的是，它只是出于某种原因禁用了我的功能，如果有任何东西不能工作，这只是一个烦恼，因为它会导致网站需要刷新后，每一次视口的大小。

window.addEventListener("resize", 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');
     }
 });