javascript - 如果窗口调整大小，jQuery 检查元素的 css 属性

Question

如何添加窗口调整功能？

jQuery(document).ready(function($){         
    var $MyDiv1 = $('#mydiv1');
        if ($MyDiv1.length && $MyDiv1.css('position') == 'fixed') { 
           console.log ( '#mydiv1 is fixed' );      
        } else {    
           console.log ( '#mydiv1 is not fixed' );      
        }       
 });

如果我在调整大小后刷新页面，这项工作。我想在调整窗口大小时检查 MyDiv1 位置是否固定。感谢您的帮助。

Answer 1

$(document).ready(myfunction);
$(window).on('resize',myfunction);

function myfunction() {
    var $MyDiv1 = $('#mydiv1');
    if ($MyDiv1.length && $MyDiv1.css('position') == 'fixed') { 
      console.log ( '#mydiv1 is fixed' );      
    } else {    
      console.log ( '#mydiv1 is not fixed' );      
    }   
}

另一种技术是在另一个事件中.trigger():

$(window).on('resize',function() {
    var $MyDiv1 = $('#mydiv1');
    if ($MyDiv1.length && $MyDiv1.css('position') == 'fixed') { 
      console.log ( '#mydiv1 is fixed' );      
    } else {    
      console.log ( '#mydiv1 is not fixed' );      
    }  
});
$(document).ready(function() {
    $(window).trigger('resize');
});

如果将代码放在页面底部以避免需要 $(document).ready，它会变得更简单:

$(window).on('resize',function() {
    var $MyDiv1 = $('#mydiv1');
    if ($MyDiv1.length && $MyDiv1.css('position') == 'fixed') { 
      console.log ( '#mydiv1 is fixed' );      
    } else {    
      console.log ( '#mydiv1 is not fixed' );      
    }  
}).trigger('resize');

引用:jQuery combine .ready and .resize