Issue with Hide / Show Jquery on fixed positioned div

问题

I've got a sticky footer at the bottom of the webpage / viewpoint as well as clickable link "toggle menu" that SHOULD hide / show the menu. Problem is that I can't get the menu to hide and I've picked up that the problem lies within the CSS of the element that is supposed to hide / show. It's the fixed position {position:fixed;} ... When I remove "fixed" out, then the hide and showing of the menu works 100% but obviously the menu is no longer at the bottom of the browser.

How can I get work this with the fixed positioning?

Javascript to show/hide goes like:

<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 Goes like:

<div id="stick_footer_title"><a class="show_hide" href="#">Toggle Menu
 &#x25BC;</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: The position:fix; css applies to the STICKYFOOTER div

回答1:

what if you hide the "stickyfooter" div, instead of the container?That way, the container will always be fixed (and shown), but when you hide the content, it will have nothing shown in it.

回答2:

Can you try giving a duration parameter?

Like this:

$(".slidingDiv").slideToggle("slow");

回答3:

Move position fixed from #stickyfooter to .slidingDiv if you can, or create a new element inside #stickyfooter that you'll hide/show.

来源：https://stackoverflow.com/questions/11162387/issue-with-hide-show-jquery-on-fixed-positioned-div