Question

我正在尝试使用此代码来检查#site_header的Y是否大于视口高度。考虑#site_header有固定的位置。我用.html（）打印结果似乎工作正常，但在这段代码中似乎错了。请问你能帮帮我吗？谢谢！

jQuery(document).ready(function(){
   jQuery(window).load(function() {
    var viewportHeight = jQuery( window ).height();
    var site_header_offset = jQuery('#site_header').offset();
    var site_header_offset_top = jQuery(site_header_offset.top);

    if ( jQuery(site_header_offset_top >= viewportHeight) ) {
        jQuery('#site_header').css({'background-color':'rgba(0,0,0,0.35)'});
    }
    if ( jQuery(site_header_offset_top < viewportHeight) ) {
        jQuery('#site_header').css({'background-color':'rgba(0,0,0,0)'});
    }
   });
});

Answer 1

如果删除第二行，则可以正常工作。（我颠倒了背景颜色）

http://jsfiddle.net/Lsct79rm/

jQuery(document).ready(function(){

var viewportHeight = jQuery( window ).height();
var site_header_offset = jQuery('#site_header').offset();
var site_header_offset_top = jQuery(site_header_offset.top);

if ( jQuery(site_header_offset_top >= viewportHeight) ) {
     jQuery('#site_header').css({'background-color':'rgba(0,0,0,0)'});

}
if ( jQuery(site_header_offset_top < viewportHeight) ) {
    jQuery('#site_header').css({'background-color':'rgba(0,0,0,0.35)'});
}

});

Answer 2

好的，我找到了解决方案。

        if ( jQuery(window).scrollTop() > viewportHeight ) {
            jQuery('#site_header').css({'background-color':'rgba(0,0,0,0.35)'});
        } else {
            jQuery('#site_header').css({'background-color':'rgba(0,0,0,0)'});
        }

我不明白我过去的代码出了什么问题，但这是有效的。 ; - ）

如果offset.top大于视口高度更改背景

2 个答案: