'高度:切换'在JQuery's'animate'使Div不断切换

'Height: Toggle' on JQuery's 'animate' makes Div keep toggling

本文关键字：Div JQuery 高度 切换 animate      更新时间：2023-10-05

我想做的是：当达到一定数量的页面幻灯片时，使网站的顶部栏向下切换。也就是说，当用户向下滑动328px时，顶部栏向下滑动并固定在顶部。

问题是，当用户向下滑动到328px时，顶部栏div开始上下切换，并且不会停止！只有当我将页面幻灯片移回顶部时，它才会停止。

当它达到328px时，我如何使它向下切换，当它低于328px时向上切换？

这是我的代码：

<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 
}

将html更改为

<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>

和你的css到

#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 
}

$(window).scroll()在每次用户滚动时被触发每次调用用户滚动$("#header-fixed").animate({"height": "toggle"});。因此，这意味着即使用户只滚动1px，顶条也会再次动画化。您必须更加小心地确定何时以及如何设置顶栏的动画。

另一个问题是topbar的初始状态和jQuery关键字toggle的使用。显然，作为动画属性的toggle还将顶栏的display值设置为none。

建议使用CSS转换的解决方案是解决此问题的好方法。

相关文章：