2017-02-16 12 views
0

私はページの一番上に透明な固定ナビゲーションバーを表示しようとしています。私は、ALMOSTが動作するコードを持っています - それは時間の90%良いですが、ユーザーがトップページ以外にページをリフレッシュすると、ナビバーは白ではなくページのそのポイントで透明なを開始します。 (スクロールでは変わりません)。jQuery - Navbarの色の変更がスクロールで動作するユーザーがページを途中で更新しない限り

ページの最上部にない限り、navbarを常に白にします。ここに私のコードは次のとおりです。

$(document).ready(function(){  
    var scroll_start = 0; 
    var startchange = $('.nav'); 
    var offset = startchange.offset(); 
    $(document).scroll(function() { 
    scroll_start = $(this).scrollTop(); 
    if(scroll_start > offset.top) { 
     $('.brand-centered').css('background-color', 'rgba(255, 255, 255, 0.9)'); 

    } else { 
     $('.brand-centered').css('background-color', 'transparent'); 


    } 
}); 
}); 
     ` 

答えて

0

このアルゴリズムでは、あなたがつもりテスト280されているので、あなたはそれが動作するかどうか、あなたが100以下

if (document.body.scrollTop >= 280 || document.documentElement.scrollTop >= 280) { 
and it will work cross-browser. Cheers! 

var myNav = document.getElementById("nav"); 

window.onscroll = function() { 
    "use strict"; 
    if (document.body.scrollTop >= 280 || document.documentElement.scrollTop >= 280) { 
    myNav.classList.add("scroll"); 
    } else { 
    myNav.classList.remove("scroll"); 
    } 
}; 
を使用することができ、このようなさまざまな何かを試すことができます
関連する問題