javascript在屏幕调整大小时更新

javascript update when screen resize

本文关键字：小时 更新 调整 屏幕 javascript      更新时间：2023-12-10

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

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

请参阅这里的jsfiddle演示，展示它的工作原理。

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

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

}

相关文章：