Question

向下滚动页面时，我希望将菜单平滑地移动到页面顶部并将其位置更改为粘性。使用以下代码，我可以在滚动时使菜单淡入。

如何让它平稳地向上移动然后坚持而不是突然褪色？

这是我的代码：

jQuery的：

$(function(){

    var menu = $('#menu'),
        pos = menu.offset();

        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });

});

CSS：

.fixed {
    position: fixed;
    top: -5px;
    left: 0;
    width: 100%;
}

演示： http://jsfiddle.net/ZzzxL/

Answer 1

如果你从你的jquery函数中删除了fadeouts，你应该达到你想要的效果：

$(window).scroll(function(){
    if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
        menu.removeClass('default').addClass('fixed');
    } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
        menu.removeClass('fixed').addClass('default');
    }
});

Example

平稳地改变元素的位置

1 个答案: