0

したがって、ヘッダーのどこかにナビゲーションがあります。ユーザーがナビゲーションをスクロールして最小化し、ページの上部に固定ナビゲーションとしてフェードインまたはアニメートして戻すと、次のjqueryコードで動作するようになりましたが、問題それはcssで仕事をするということです.animateに置き換えようとすると、通過するピクセルごとに繰り返されます.

コードは次のとおりです。

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 に答える