在內容更改後，使用jQuery動態更改頁腳的位置

-1

我有一個菜單由無序列表中的4個圖像組成，每個菜單中包含最初隱藏的文本（信息）。當用戶點擊這些圖像中的任何一個時，相應的信息文本被顯示或隱藏有jQuery動畫功能。在內容更改後，使用jQuery動態更改頁腳的位置

我有一個頁腳，我打算總是從頁面底部向上40px。問題是：單擊菜單並顯示一些信息文本時，它會使身體的高度增加，從而在瀏覽器窗口上顯示垂直滾動條。

但是，頁腳仍保留在相同的位置，忽略了身體元素的新高度。

我該如何讓它跟隨菜單的動畫，向上/向下移動，但始終在瀏覽器窗口底部40px？

這的jsfiddle複製了問題的實質：http://jsfiddle.net/bmscmoreira/6r4K9/8/

我的HTML是這樣的：

<body> 
    <div id="menu"> 
     <ul class="accordion"> 
      <li> 
       <img id="menu-item-1" src="img/menu-item-1.png" alt="1"> 
      </li> 
      <li class="info"> 
       <p>here goes full text for menu item 1</p> 
      </li> 
      <li> 
       <img id="menu-item-2" src="img/menu-item-2.png" alt="2"> 
      </li> 
      <li class="info"> 
       <p>here goes full text for menu item 2</p> 
      </li> 
      <li> 
       <img id="menu-item-3" src="img/menu-item-3.png" alt="3"> 
      </li> 
      <li class="info"> 
       <p>here goes full text for menu item 3</p> 
      </li> 
      <li> 
       <img id="menu-item-4" src="img/menu-item-4.png" alt="4"> 
      </li> 
      <li class="info"> 
       <p>here goes full text for menu item 4</p> 
      </li> 
     </ul> 
    </div> 
    <div id="footer"> 
     <p>footer text</p> 
    </div> 
</body>

，顯示或隱藏菜單項的全文jQuery的動畫功能：

<script type="text/javascript"> 
$(document).ready(function($) { 
    $('.accordion > .info').hide(); 
    $('.accordion > li > img').click(function(){ 

     if ($(this).hasClass('selected')) { 
      $(this).removeClass('selected'); 
      $(this).parent().next().slideUp(); 
     } else { 
      $('.accordion > li > img').removeClass('selected'); 
      $(this).addClass('selected'); 
      $('.accordion > .info').slideUp(); 
      $(this).parent().next().slideDown(); 
     } 
     return false; 
    }); 
}); 
</script>

CSS：

html { 
background-color: #666666; 
} 

#footer { 
position: absolute; 
bottom:40px; 
} 

#menu { 
position: relative; 
margin-left:55px; 
margin-top:75px; 
}

來源

2014-05-16 BMM

這個問題似乎太具體。您可能試圖調查根本原因併爲該問題提供更多相關代碼和信息，因此它可能適用於其他尋找您所處問題的人。 – falsarella

此外，放置參考代碼要比放置代碼好得多一個鏈接，因爲它索引谷歌搜索，它是永久性的（一個鏈接可能會在長期被打破，在這種情況下，你的問題也將變得對知識庫無用）。我懇請您完全閱讀StackOverflow幫助。它位於您的聲譽得分和徽章的右側。 – falsarella

我編輯了這個問題，並試圖使其更好地解釋。請考慮修改這個問題的用處。謝謝。 – BMM

嘗試：

$('html, body').animate({ 
    scrollTop: $("#elementtoScrollToID").offset().top 
}, 2000);

您希望把這個代碼的.click()監聽器內部，使得頁面的相應元素。

Source

來源

2014-05-16 22:53:01 martynas

感謝您的幫助。我不清楚，希望現在。 – BMM

的position: absolute;與bottom: 40px;組合將保持#footer 40像素的瀏覽器底部邊緣上方：

#footer.bottomApproach { 
    position: absolute; 
    bottom: 40px; 
}

的margin-top: 200px;與margin-bottom: 40px;組合將保持#footer以下內容文本：

#footer.followApproach { 
    margin-top: 80px; 
    margin-bottom: 40px; 
}

使用jQuery動態處理辦法戰略，這樣的事情：

$('.accordion > li > img').click(function(){ 
    if ($(this).hasClass('selected')) { 
     $(this).removeClass('selected'); 
     $(this).parent().next().slideUp(); 
    } else { 
     $('.accordion > li > img').removeClass('selected'); 
     $(this).addClass('selected'); 
     $('.accordion > .info').slideUp(); 
     $(this).parent().next().slideDown(); 
    } 
    if ($(document).height() > $(window).height()) { 
     $("#footer").removeClass("bottomApproach").addClass("followApproach"); 
    } else { 
     $("#footer").removeClass("followApproach").addClass("bottomApproach"); 
    } 
    return false; 
});

最後，在默認情況下，開始使用bottomApproach，因爲所有的菜單項將被摺疊：

<div id="footer" class="bottomApproach"> 
    <p>footer text</p> 
</div>

來源

2014-05-16 23:00:06 falsarella

我可能誤解了這個問題... – martynas

@martynas是的，你可能，但他的問題也是模糊和具體的（它可能沒有引導我們去正確的理解），所以唯一的解決辦法是訪問鏈接和試圖看看他在說什麼。 – falsarella

我已經編輯了這個問題，並試圖讓它更好地解釋。請考慮修改這個問題的用處。謝謝。 – BMM

在內容更改後，使用jQuery動態更改頁腳的位置

回答

相關問題