スクロールするときのナビゲーションバーのコンテンツを変更するにはどうすればよいですか？

Question

特定のCSSを背景色のように変更するだけでなく、実際には異なるコンテンツや同じコンテンツを表示しますが、異なる方法で再配置します。私はブートストラップを使用しています。

http://www.univision.com/noticiasは何したいですか？

ユーザがスクロールしたかどうかによって、別のnavbarを作成し、jQueryを使用して表示または非表示にする必要がありますか？皆さんはこのコードを知っていますか？

ありがとうございます！

Answer 1

この効果は、CSSと少しのJavaScriptを使用して達成できます。 JavaScriptスクロールイベントリスナを追加し、必要なオフセットをチェックし、それに応じてhtml要素からCSSクラスを追加または削除することができます。

例：

HTML：

<h1 class="default-style">Hello World</h1> 

CSS：

.default-style { 
    background-color: yellow; 
} 
.changed-style { 
    background-color: green; 
} 

のjQuery：

function init() { 
$(window).scroll(function() { 
    var distanceY = window.pageYOffset; 
    var breakpoint = 300; // you can change this value according to your layouts 
    var elementToChange = $(".default-style"); 
    if (distanceY > breakpoint) { 
     elementToChange.addClass("changed-style"); 
    } 
    else { 
     if (elementToChange.hasClass("default-style")) { 
      elementToChange.removeClass("changed-style"); 
     } 
    } 
}); 
} 

window.onload = init(); 

もちろん、あなたのケースでは、あなたがブートストラップを使っていると言ったように、ヘッダのブートストラップクラスを変更することができます。例えば。

次の3つのメニュー

<div class="col-md-4 menu-1">Home</div> 
<div class="col-md-4 menu-2">About</div> 
<div class="col-md-4 menu-3">Contact</div> 

を持っており、ユーザーがスクロールを使用すると、メニュー3を隠し、（メニュー1とメニュー2ための）半分の総ブラウザの幅を分割したいときのが言わせた場合。あなたはできます：

function init() { 
$(window).scroll(function() { 
    var distanceY = window.pageYOffset; 
    var breakpoint = 300; // you can change this value according to your layouts 
    var menu1 = $(".menu-1"), menu2 = $(".menu-2"), menu3 = $(".menu-3"); 
    if (distanceY > breakpoint) { 
     menu3.hide(); 
     menu1.addClass("col-md-6"); 
     menu2.addClass("col-md-6"); 
    } 
    else { 
     if (menu1.hasClass("col-md-6") || menu2.hasClass("col-md-6")) { 
      menu1.removeClass("col-md-6"); 
      menu2.removeClass("col-md-6"); 
     } 
    } 
}); 
} 

window.onload = init(); 

希望します。