0

私はメニューバーを作成していますが、JQuery はかなり新しいものです。メニューバーを下にスクロールするのを遅らせたいのですが、上にスクロールすると、遅滞なくブラウザウィンドウの上部に固定したいのです。遅延は両側で同じになり、上にスクロールすると遅延はありません。

誰かが私を助けてくれることを願っています:)

$(document).ready(function(){
var speed = 1000;
var speedtop = 0;
var menu = $('nav#header');
var offset = menu.offset().top;
var menuStartPos = menu.position().top;
var top_offset = 0;

updateFloatingMenu(); //we don't have this just yet

$(window).scroll(function(){
    updateFloatingMenu();
});

function updateFloatingMenu(){
    var scrollAmount = $(document).scrollTop();
    var newPosition = menuStartPos + scrollAmount;

    if(scrollAmount > offset){
        var topPos = (newPosition-offset) + top_offset;
        menu.stop().animate({top: topPos}, speed);
    }else{
        menu.stop().animate({top: menuStartPos}, speedtop);
    }
};
});
4

1 に答える 1

0

CSS にクラスを追加します。

#header.fixed {
    position:fixed;
    top: 0 !important; /* important, to override inline style-tag */
}

上にスクロールするときにこのクラスをメニューに追加して、常にページの上部に固定します

var offset = 0;

function updateFloatingMenu(){
    var scrollAmount = $(document).scrollTop();

    if (scrollAmount > offset){
        menu.stop().removeClass('fixed').animate({'top': scrollAmount}, speed);
    } else {
        menu.stop().addClass('fixed')
        menu.css('top', scrollAmount); // Set top here so it's in the right place when reverting scroll
    }

    offset = scrollAmount; // Update current offset
}
于 2013-09-29T21:11:24.750 に答える