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

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

}

屏幕调整大小时javascript更新

2 个答案: