Question

所以我在我的标题上有一个导航，当用户滚动通过我希望最小化它的导航并将fadeIn或动画作为固定导航返回到页面顶部时，我使用以下jquery代码但问题在于它使用css完成工作，如果我尝试用动画替换它，它会为它传递的每个像素重复自己。

这是代码：

function fixDiv() {

var $cache = $('.stickynav'); 
if ($(window).scrollTop() > 127)

$cache.css({'position': 'fixed','top': '0px','height': '40px'}),
$('#logo img').css({'height': '30px', 'position': 'relative', 'bottom': '10px'}),
$('#main_menu_container').css({'bottom': '40px'});

else                                    
$cache.css({'position': 'relative','top': '0px', 'height': 'auto'}),
$('#logo img').css({'height': 'auto', 'position': 'auto', 'bottom': 'auto'}),
$('#main_menu_container').css({'bottom': 'auto'});
}

$(window).scroll(fixDiv);
fixDiv();

Here is a live jsfiddle

Answer 1

尝试

jQuery(function(){
    var isfxd = false, $cache = $('.stickynav'), $ct = $('#main_menu_container'), $img = $('#logo img');

    function fixDiv() {
        var shdfxd = $(window).scrollTop() > 127;

        if (shdfxd && !isfxd) {
            isfxd = true;

            $cache.finish().css({'position': 'fixed'}).animate({'top': '0px','height': '40px'});
            $img.css({'height': '30px', 'position': 'relative', 'bottom': '10px'});
            $ct.css({'bottom': '40px'});
        } else if(isfxd && !shdfxd) {
            isfxd = false;

            $cache.finish().css({'position': 'relative','top': '0px', 'height': 'auto'});
            $img.css({'height': 'auto', 'position': 'auto', 'bottom': 'auto'});
            $ct.css({'bottom': 'auto'});
        }
    }
    $(window).scroll(fixDiv);
    fixDiv();
});

演示：Fiddle

请注意，finish（）仅适用于jquery 1.9及更高版本

滚动经过某个点时，jQuery淡入或动画

1 个答案: