Question

我正在尝试在我的页面上设置一个粘性页脚，其条件是显示或隐藏它。 HTML如下：

        <div id="wrapper_footer_fixed">
            <?php echo $this->getChildHtml('footer') ?>

            <div class="clear"></div>
        </div>

        <div id="footerstart"></div>

        <div id="wrapper_footer">
            <?php echo $this->getChildHtml('footer') ?>

            <div class="clear"></div>
        </div>

我对#wrapper_footer_fixed的CSS是：

        #wrapper_footer_fixed {
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 99999;
            display: block;
            width: 100%;
            height: 40px;
            border-top: 1px solid #e5e5e5;
            background: #292929 url("../images/bkg_site_rock_pattern.png");
            }

#footerstart是#wrapper_footer启动的标记。

我需要这个如何工作：

#wrapper_footer_fixed默认加载到屏幕上
当#footerstart（或#wrapper_footer）在页面上可见时，＃wrapper_footer_fixed不可见（fadeOut）。
如果视口正在查看#footerstart（或#wrapper_footer）并且用户向上滚动（以便#footerstart不再显示在屏幕上），则会立即在屏幕中显示#wrapper_footer_fixed（fadeIn）。
如果页面的高度足够短，没有垂直滚动，那么#wrapper_footer_fixed不显示，但如果内容被动态添加到页面而没有重新加载，则显示（fadeIn），显示垂直滚动条。

我失败的尝试如下（我对jQuery的知识非常有限）：

 jQuery(document).ready(function(){ 
    if(jQuery('#footerstart').is(':visible')){
        jQuery('#wrapper_footer_fixed').fadeOut();
    } else if(jQuery('#footerstart').not(':visible')) {
        jQuery('#wrapper_footer_fixed').fadeIn();
    }
  });

Answer 1

如果#footerstart可见，你必须计算。 “如果元素消耗文档中的空间，则认为元素是可见的。可见元素的宽度或高度大于零。” - http://api.jquery.com/visible-selector/

$(function() {
    if($(window).height() + $(window).scrollTop() > $('#footerstart').offset().top) {
        // $('#footerstart') is visible
    }
    else {

    }
});

当div＃footerstart在屏幕上时fadeOut div＃wrapper_footer_fixed

1 个答案: