-1

ページを下にスクロールするときに固定ナビゲーションを実現するために使用しているこのコードでは修正できない問題があります。

js が何もしないようにしたい ブラウザ ウィンドウの幅が 720px 未満の場合、機能しますが、最初のページの読み込みでのみ機能します。つまり、固定ナビゲーションがアクティブなときにウィンドウのサイズを変更すると、ウィンドウのサイズを 720px 未満に変更しても、アクティブなままになります。jQuery は次のとおりです。

//Sticky Navi
jQuery(function($) {

// grab the initial top offset of the navigation 
var sticky_navigation_offset_top = $('.main-navigation').offset().top;
var browserWidth = $( window ).width();

// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
    var scroll_top = $(window).scrollTop(); // our current vertical position from the top

    // if we've scrolled more than the navigation, change its position to fixed to stick to top,
    // otherwise change it back to relative
    if (scroll_top > sticky_navigation_offset_top && browserWidth > 720) { 
        $('.main-navigation').css({ 'position': 'fixed', 'top':0, 'z-index':999999, 'opacity': 0.9, 'box-shadow': '0px 3px 5px #393939' })
    } else {
        $('.main-navigation').css({ 'position': 'relative', 'opacity': 1, 'box-shadow': 'none' }); 
    }   
};

// run our function on load
sticky_navigation();

// and run it again every time you scroll
$(window).scroll(function() {
     sticky_navigation();
  });

});

ご協力いただきありがとうございます

4

1 に答える 1

1

コメントで言ったように、あなたの HTML と CSS なしでは何もできませんが、ここでうまくいくものがあります。修正が必要な奇妙な機能がありました。

function sticky_navigation() {

// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('.main-navigation').offset().top;
var browserWidth = $(window).width();
var scroll_top = $(window).scrollTop(); // our current vertical position from the top

// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if ((scroll_top > $('.main-navigation').height()) && (browserWidth > 720)) {
    $('.main-navigation').css({ 'position': 'fixed', 'top':0, 'z-index':999999, 'opacity': 0.9, 'box-shadow': '0px 3px 5px #393939' });
} else {
    $('.main-navigation').css({ 'position': 'relative', 'opacity': 1, 'box-shadow': 'none' });
    }   
};

// and run it again every time you scroll
$(window).scroll(function() {
    sticky_navigation();
});

ジャンク HTML をいじる: http://jsfiddle.net/cm4t6/

于 2012-11-01T15:40:43.580 に答える