0

我是 jquery 的新手，我被困在了一些东西上，如何为一段脚本添加淡入淡出？我有一个固定的标题，并希望在滚动 60px 后该类淡入另一个类，到目前为止我已经设法将它缝合在一起......

我认为 .fadeIn 位会起作用，但是，它没有:)

任何帮助将不胜感激！谢谢。

<script>
var fixed = false;


$(document).scroll(function() {
if( $(this).scrollTop() > 60 ) {
    if( !fixed ) {
        fixed = true;
        $('.header').css({background:'#242323'}).fadeIn('fast');
        $('.header').css("border-bottom-color", "#242323").fadeIn('fast');
    }
} else {
    if( fixed ) {
        fixed = false;
        $('.header').css({background:'none'}).fadeIn('fast');
        $('.header').css("border-bottom-color", "#fff").fadeIn('fast');
    }
}
});
</script>
4

1 回答 1

0

为了淡入工作，您需要不显示您的元素。因此，通过最初不显示它然后淡入淡出，您将获得您正在寻找的效果。

CSS /如果需要，这个 css 可以容纳在 js 中。对于这个例子，由于布局是未知的，而且为了清楚起见，它已经被分开了。/ .header{ 高度：50px; 宽度：100%；位置：固定；显示：无；白颜色; }

JS

var fixed = false;

$(document).scroll(function() {
if( $(this).scrollTop() > 60 ) {
    if( !fixed ) {
        fixed = true;
        $('.header').css({background:'#242323',
                          'border-bottom':'1px solid #242323'}).fadeIn('fast');
    }
} else {
    if( fixed ) {
        fixed = false;
        $('.header').fadeOut('fast');
    }
}
});

HTML

<div class="header">the header</div>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus....</p>

http://jsfiddle.net/vjk9a/

于 2013-10-29T16:23:27.770 回答