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 が画面にすぐに表示されます (fadeIn)。
  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 に答える