'高度：切换'JQuery的'动画'使Div继续切换

我想要做的是：当达到一定量的页面幻灯片时，使网站的顶部栏向下切换。 I.E.，当用户向下滑动328px时，顶部栏杆向下滑动并保持固定在顶部。'高度：切换'JQuery的'动画'使Div继续切换

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

如何在达到328像素时将其切换下来，并在达到328像素以下时切换到底？

这是我的代码：

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

来源

2015-02-11 user3596108

改变你的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 

}

来源

2015-02-11 15:42:07 Tahmasb

$(window).scroll()每次被触发用户滚动。每次用户滚动$("#header-fixed").animate({"height": "toggle"});被调用。所以这意味着即使用户只滚动1px，顶栏也会再次生成动画。您必须更加小心地查明何时以及如何为顶栏添加动画。

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

建议的CSS过渡解决方案是解决这个问题的好方法。

来源

2015-02-11 15:47:27 cangoektas

'高度：切换'JQuery的'动画'使Div继续切换

回答

相关问题