変更ナビゲーションバーの色

Question

をスクロールしながら、私はちょうどそれが何の問題 せずに、GoogleのChromeで働いていたが、私はFirefoxの でそれをテストしようとしたとき、それはそれで作業していない 、スクロール後にナビゲーションバーの色を変更するには、純粋なJavaScriptでその方法をしました。

誰でも私にこれに関するアドバイスをいただけますか？ ありがとうございます。

本当に

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

 
window.onscroll = function() { 
 
    "use strict"; 
 
    if (document.body.scrollTop >= 280) { 
 
     myNav.classList.add("scroll"); 
 
    } else { 
 
     myNav.classList.remove("scroll"); 
 
    } 
 
};

body { 
 
    margin:0; 
 
    padding:0; 
 
    height:4000px; 
 
    } 
 
.nav { 
 
    position:fixed; 
 
    width:100%; 
 
    height:60px; 
 
    background-color:#111; 
 
    transition:all .5s ease-in-out; 
 
    } 
 
.scroll { 
 
    background-color:transparent; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="nav" class="nav"></div>

Answer 1

あなたは純粋なJavaScriptのを使用している場合

は、詳細はhere参照してください：クロム、SafariやOperaはbodyレベルでそれを置きながらIEはhtmlで溢れてい

VAR本体= document.body; // Chrome、Safari、Operaの場合

var html = document.documentElement; // FirefoxとIEは、elseが指定されていない限り、 レベルでオーバーフローを発生させます。

if (document.body.scrollTop >= 280 || document.documentElement.scrollTop >= 280) { 

をし、それがクロスブラウザを動作します。したがって、我々はこれらの2つのブラウザ

ため のdocumentElementプロパティを使用するので、あなたはこれを使用する必要があります。乾杯！

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

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 4000px; 
 
} 
 
.nav { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #111; 
 
    transition: all .5s ease-in-out; 
 
} 
 
.scroll { 
 
    background-color: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="nav" class="nav"></div>

あなたはjqueryの使用している場合：

var myNav = $("#nav"); 
 

 
$(window).on('scroll', function() { 
 
    "use strict"; 
 
    if ($(window).scrollTop() >= 280) { 
 
    myNav.addClass("scroll"); 
 
    } else { 
 
    myNav.removeClass("scroll"); 
 
    } 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 4000px; 
 
} 
 
.nav { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #111; 
 
    transition: all .5s ease-in-out; 
 
} 
 
.scroll { 
 
    background-color: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="nav" class="nav"></div>

Answer 2

$(window).scroll(function() { 
if ($(this).scrollTop() > 20){ 
    $('#navBar').css({property: "value"}); 
    } else { 
     $('#navBar').css({property: "value"}); 
    } 
}); 

ない答えが、これは私が上でテストしたすべてのブラウザで私のために素晴らしい作品（すなわち、エッジ、サファリ、クロム& Firefoxの）

Answer 3

これを試してください。ナビゲーションバーの背景色が透明に変わる前に、「280」を何ピクセルまでスクロールするかを変更します。

HTML：

<div id="navbar"></div> 

はJavaScript：

$(function() { 
$(window).on("scroll", function() { 
    if($(window).scrollTop() > 280) { 
     //background on scroll 
     $("#navbar").addClass("scroll"); 
    } else { 
     //background at top 
     $("#navbar").removeClass("scroll"); 
    } 
    }); 
}); 

CSS：

のFirefox：

#navbar { 
background-color:#111; 
transition:all .5s ease-in-out; 
} 
.scroll { 
background-color:transparent; 
}