私のサイトの上部には、基本的な水平ナビゲーションバーがあります。このサイトは、特定のポイントで異なる色の背景を持つ長い1ページのサイトです。私は特定のポイントでフォント色をある色から別の色に変更する方法を知りたがっていました。特定のポイントでフォントの色を変更するには、どのようにナビゲーションを設定しますか?
0
A
答えて
1
あなたが望む量のウィンドウをスクロールした後、リンクにクラスを追加する必要があります。
だからあなたはあなたが
a.changeColor{color:green}
を変更して(これらは、パフォーマンスのために悪いです)スクロールで機能を実行したいもののためにあなたのデフォルトの色そして
a{color:red;}
とクラスを設定します
$window = $(window),
$nav = $('.nav'),
scrollTop = $window.scrollTop();
$window.scroll(function(){
scrollTop = $window.scrollTop();
if(scrollTop > 500){
$nav.children('a').addClass('changeColor');
}else{
$nav.children('a').removeClass();
}
})
https://jsfiddle.net/hahrywa6/2/
これを編集してdivをターゲティングすることもできます。この方法で値をハードコードする必要はありません。これはあなたにとってより良いかもしれません。
これを行うには、navがヒットしたときにテキストの色を変更するdivをターゲットとする変数を作成します。
var yourDiv = $('.yourDivName').offset().top;
先頭からオフセットを見つけます。 if文で同じscrollTop変数を使用するだけです。ウィンドウスクロールが要素以上の場合は、クラスを追加します。
var $window = $(window),
$nav = $('.nav'),
scrollTop = $window.scrollTop(),
triggerDiv = $('#trigger-div').offset().top;
$window.scroll(function(){
scrollTop = $window.scrollTop();
if(scrollTop > 500){
$nav.children('a').removeClass().addClass('changeColor');
}else{
$nav.children('a').removeClass();
}
if(scrollTop > triggerDiv){
$nav.children('a').removeClass().addClass('changeColor2');
}
})
関連する問題
- 1. スクリプトはどのようにして(特定のクラスの)特定のフォントを変更できますか?
- 2. 特定のセルのフォント色をUITableViewRowActionから変更するにはどうすればよいですか?
- 3. gitで特定のフォントの色を変更するにはどうすればよいですか?
- 4. jQueryカレンダーで特定の日付のフォント色を変更するにはどうすればいいですか?
- 5. 特定の地域でフォントとフォントの色を調整するにはどうすればよいですか?
- 6. 特定のChecklistboxアイテムのフォントまたは色を変更していますか?
- 7. 特定のポイントでCSSが背景色を変更する
- 8. Javascript - テキストエリア内の特定のテキストのフォント色を変更する
- 9. FileMergeのフォント/設定/環境設定を変更するには?
- 10. 段落のフォントを特定のフォントに変更する方法
- 11. Matplotlib:インデックス内の特定のポイントの後にラインの色を変更する
- 12. WPF - DataGridの特定の行を別の色に設定するにはどうすればよいですか?
- 13. OpenGLテクスチャの特定の色を透明に設定するにはどうすればよいですか?
- 14. フラッシュ(swf)アニメーションで特定のポイントをどのようにマークしますか?
- 15. 特定のコンテンツの変更日を設定するにはどうすればよいですか?
- 16. 特定のテキストでテキストビューのテキストの色を変更するにはどうすればよいですか?
- 17. カラーバーの色を(特定の値の間隔で)変更するにはどうすればよいですか?
- 18. ラジオボタンの特定の色のみを角度で変更するにはどうすればよいですか?
- 19. Google Chartで特定の範囲の色を設定するにはどうすればよいですか?
- 20. UITableViewの特定のセルのテキストの色を変更するにはどうすればよいですか?
- 21. テキストエリアに異なるフォントの色を設定するにはどうすればよいですか?
- 22. 剣道のチャートヘッダーでフォントの色を設定するにはどうすればよいですか?
- 23. 特定のポイント(キャンバスなし)をどのように拡大しますか?
- 24. wxPython TextCtrlで特定の単語の色を変更するにはどうすればよいですか?
- 25. Googleマップの特定の道路の色を変更するにはどうすればよいですか?
- 26. 特定のフラグメントのステータスバーの色を変更するにはどうすればよいですか?
- 27. はどのように特定のフォントがPDFで特定の文字:: API2
- 28. Yoctoの特定のマシンのカーネル設定を変更するにはどうしたらいいですか?
- 29. データグリッドの行の特定のセルに色を変更します。
- 30. フォントの色を変更するには
だから私は、どちらかの方法のいずれか(私が希望するものである)のdivまたはハードコードされた値で、私のために働くことを得るように見えることはできません。以前はjsfiddleを使っていませんが、すべてを正しくアップロードしたと思います。 https://jsfiddle.net/Remirlis/Lt7o6Lyd/ – Remirlis
カップルもの:あなたのjavascriptパネルは純粋なJSに設定されていました。これはjqueryを使用しています!私は "子供"を "見つける"ように変更しました。子供たちはあなたの要素を直ちに子供、すなわち1つ下のレベルでチェックします。 Findはnav内のすべてのコンテンツをチェックします。ここで更新された謎です:https://jsfiddle.net/Lt7o6Lyd/1/ – Dale
ありがとう!それは私のためにそれをしました。 – Remirlis