0

所以我在标题的某处有一个导航，当用户滚动传递导航时，我想最小化它并淡入淡入或将其作为固定导航返回到页面顶部，我使它与以下 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();

这是一个现场jsfiddle

4

1 回答 1

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();
});

演示：小提琴

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

于 2013-08-17T09:34:32.393 回答