0

我正在尝试在我的页面上设置一个粘性页脚，条件是显示或隐藏它。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 开始位置的标记。

我需要这个工作的方式是：

  1. #wrapper_footer_fixed 默认加载到屏幕上
  2. 当#footerstart（或#wrapper_footer）在页面上可见时，#wrapper_footer_fixed 不可见（fadeOut）。
  3. 如果视口正在查看#footerstart（或#wrapper_footer）并且用户向上滚动（以便#footerstart 不再在屏幕上），#wrapper_footer_fixed 立即显示在屏幕中（淡入）。
  4. 如果页面的高度足够短以至于没有垂直滚动，则 #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();
    }
  });
4

1 回答 1

1

您必须计算#footerstart 是否可见。“如果元素占用了文档中的空间，则它们被认为是可见的。可见元素的宽度或高度大于零。” - http://api.jquery.com/visible-selector/

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

    }
});
于 2013-02-10T15:03:36.503 回答