Question

基本上我想要完成的是让我的网站上的导航栏在达到某个锚点时下拉。我似乎无法弄清楚如何使用div来使文本动画（下拉）。文本是静止的，下拉效果只是揭示它。

有没有办法让文本移动使用.slidedown（）或者我是否需要合并.animate（）来完成此操作？我尝试过使用.animate（），但我无法弄清楚如何隐藏和取消隐藏div。如果任何人有任何建议或指出我正确的方向，将非常感谢。

var t = $("#about").offset().top;

$(window).scroll(function(){
    if( $(document).scrollTop() >= t ) {
        $('#global-nav').slideDown(500, 'easeOutBounce');
    } else {
        $('#global-nav').slideUp(500, 'easeInExpo');
    }		
});

html { height: 2000px; } 

#global-nav {
    height:50px;
    background:#000;
    z-index: 9999;
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%;
    color:#fff;
    display: none;
    text-align:center;
}
#global-nav p {
    margin-top:15px;
}
#about{
   margin-top:400px;

<div id="global-nav"><p>Random Text</p>.</div>

<div id="about"></div>

这是我迄今为止所做的工作：http://jsfiddle.net/Hysteresis/0oazqj4y/36/

Answer 1

这与fixed元素的性质以及子元素在其中的行为方式有关。由于slideDown动画了元素的高度，p生活在fixed元素内部 - 它不会产生任何影响。

尝试将display:none;添加到p CSS，然后：

$('#global-nav p').slideDown(500, 'easeOutBounce');

到你的JS

Here's a fiddle

如何使用.slidedown（）使用div制作文本动画（向下滑动）

1 个答案: