在内容更改后，使用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动态更改页脚的位置

回答

相关问题