fadeOut div＃wrapper_footer_fixed當div＃footerstart在屏幕上

我試圖在頁面上設置一個粘滯頁腳，以顯示或隱藏它的條件。該HTML如下：fadeOut div＃wrapper_footer_fixed當div＃footerstart在屏幕上

 <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>

的CSS我有#wrapper_footer_fixed是：

 #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是不可見的（消退）。
如果視口正在查看#footerstart（或#wrapper_footer）並且用戶向上滾動（以使#footerstart不再在屏幕上），則立即在屏幕中顯示（fadeIn）#wrapper_footer_fixed。
如果頁面的高度足夠短以至於沒有垂直滾動，則#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(); 
    } 
    });

來源

2013-02-10 Pegues

我仍然有問題。 Tommi Halonen提供的解決方案不起作用。我和一位朋友談過，他們說需要使用視口插件以及elemt-in-view-event插件。我在這裏添加了我的代碼：http://www.commonthreadfashion.com/dev/jsproblem.js 也許有人可以看一看，看看現在的問題是什麼？謝謝 – Pegues 2013-02-10 20:30:46

你都數不過來，如果#footerstart是可見的。「如果元素消耗文檔中的空間，則認爲它們是可見的。可見元素的寬度或高度大於零。」 - http://api.jquery.com/visible-selector/

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

    } 
});

來源

2013-02-10 15:03:36

fadeOut div＃wrapper_footer_fixed當div＃footerstart在屏幕上

回答

相關問題