我有一个粘性页脚,在网页/视口底部以及可点击的“切换菜单”链接,应该隐藏/显示菜单。问题是我无法让菜单隐藏,我发现问题在于应该隐藏/显示的元素的CSS中。它是固定位置{position:fixed;}...当我删除“fixed”时,菜单的隐藏和显示就可以完美地工作,但显然菜单不再位于浏览器底部。
如何使用固定定位使其正常工作?
用于显示/隐藏的Javascript如下:
FYI:position:fix; CSS适用于STICKYFOOTER div。
如何使用固定定位使其正常工作?
用于显示/隐藏的Javascript如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").show();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
HTML的语法如下:
<div id="stick_footer_title"><a class="show_hide" href="#">Toggle Menu
▼</a></div>
<div class="slidingDiv">
<div id="stickyfooter">
<ul id="footer_menu">
<li class="imgmenu"><a href="#"></a></li>
<li><a href="#intro">Intro</a></li>
<li><a href="#photos">Photos</a></li>
</ul>
</div>
</div>
FYI:position:fix; CSS适用于STICKYFOOTER div。
position: fixed
的页脚内添加一个position: relative
容器吗? - Wex