JQuery的“动画”上的“高度：切换”使Div继续切换

Question

What I am trying to do is: to make the top bar of a website toggle down when a certain amount of page slide is reached. IE, when the user slides down 328px, the top bar slides down and stay fixed on top.

The problem is that when the user reaches the 328px sliding down, the top bar div starts toggling up and down and it doesn't stop! It only stops when I move the page slide back to the top.

How do I make it toggle down when it reaches 328px and the toggle up when it gets below 328px?

This is my code:

<script type="text/javascript">
        $( document ).ready(function() {
            $( window ).scroll(function() {
                if ($( window ).scrollTop() > 328) {
                    $("#header-fixed").css({"display": "block"});
                    $("#header-fixed").animate({"height": "toggle"});
                }
                if ($( window ).scrollTop() <=328) {
                    $("#header-fixed").css({"display": "none"});
                    $("#header-fixed").animate({"height": "toggle"});
                }
            });
        });
</script> 

<div id="header-fixed"> 

    <a href="index.html"> <img id = "logo" src = "img/logo-new.png"/> </a>

    <div id = "menu-links-div">

        <ul id = "ul-links">
            <a href = "index.html"> <li class = "menu-links"> Home </li> </a>
            <a href = "media.html"> <li class = "menu-links"> Media </li> </a>
            <a href = "/"> <li class = "menu-links"> Sobre </li> </a>
            <a href = "/"> <li class = "menu-links"> Contatos </li> </a>
        </ul>

    </div>  

</div>

CSS:

#header-fixed {
    position: fixed;
    width: 100%;
    top: 0px;
    display: none;
    height: 100px;
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #1e5799 0%, #7db9e8 60%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(60%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #1e5799 0%,#7db9e8 60%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #1e5799 0%,#7db9e8 60%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #1e5799 0%,#7db9e8 60%); /* IE10+ */
    background: linear-gradient(135deg,  #1e5799 0%,#7db9e8 60%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient 
}

Answer 1

change your html to

<script type="text/javascript">
        $( document ).ready(function() {
            $( window ).scroll(function() {
                if ($( window ).scrollTop() > 328) {

                    $("#header-fixed").css('height','100px');
                }
                if ($( window ).scrollTop() <=328) {
                    $("#header-fixed").css('height','0');


                }
            });
        });
</script> 

and your css to

#header-fixed {
    position: fixed;
    width: 100%;
    top: 0px;
    overflow: hidden;
    height: 0px;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -o-transition: height 0.5s;

    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #1e5799 0%, #7db9e8 60%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(60%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #1e5799 0%,#7db9e8 60%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #1e5799 0%,#7db9e8 60%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #1e5799 0%,#7db9e8 60%); /* IE10+ */
    background: linear-gradient(135deg,  #1e5799 0%,#7db9e8 60%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient 

}

Answer 2

$(window).scroll() is fired everytime the user scrolls. Everytime the user scrolls $("#header-fixed").animate({"height": "toggle"}); is called. So that means even when a user only scrolls for 1px the topbar will animate again. You have to be more careful with finding out when and how to animate the topbar.

Another problem is the initial state of the topbar and the use of the jQuery keyword toggle . Apparently toggle as an animation property also sets the display value to none for your topbar.

The suggested solution with CSS transitions is a good way to solve this.