ハイライトナビゲーションバー李画面

JSFIDDLEにあるdivのベース色：https://jsfiddle.net/sjhpmzuk/1/ハイライトナビゲーションバー李画面

私は1ページスクロールのウェブサイトを持っています。私はあなたのためのデモを作成しました（上）ので、あなたはよりよく理解することができます。私が望むのは、ページをスクロールすると、ナビゲーションの色を自動的に変更したいということです。

たとえば、私がこのページに来るときには、.redが先頭にあるので、li:nth-of-type(1) a{color:yellow}にします。私はページをスクロールすると、青は私たちの興味のポイントになるので、同じ方法で動作するフッタdiv（私の例では.green）へのすべての他の架空のdivとli:nth-of-type(2) a{color:yellow}など。

私は、BootStrapが何とかこれを行うことができますが、それはあまりにも複雑で長いコードです。私の例を使って誰かに私にそれをする方法を教えてもらえますか？ :)

ありがとうございました！

出典

2016-05-24 Honzis Novák

ここでは、コードの素晴らしい作品は、私は、ああ、それは分を欲しがる、素晴らしい見えますhttps://jsfiddle.net/cse_tushar/Dxtyu/141/ – Pugazh

です私の例にそれを入力しようとします –

@Pugazh https://jsfiddle.net/sjhpmzuk/3/私の間違いを見ることができますか？：/それは私のために働いていない、私は間違ったsomehingをやっている... –

第1の解決策。 BootsrapのコンポーネントとJavaScriptによって。

ナビゲーションバー、Fixed to top
ScrollSpy

https://jsfiddle.net/glebkema/24tddf46/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
@media (min-width: 768px) { 
 
    .navbar-nav { 
 
    float: none; 
 
    text-align: center; 
 
    } 
 
    .navbar-nav>li { 
 
    float: none; 
 
    display: inline-block; 
 
    } 
 
} 
 

 
.navbar-inverse .navbar-nav > .active:nth-of-type(1) > a, 
 
.navbar-inverse .navbar-nav > .active:nth-of-type(1) > a:hover, 
 
.navbar-inverse .navbar-nav > .active:nth-of-type(1) > a:focus { 
 
    color: red; 
 
} 
 

 
.navbar-inverse .navbar-nav > .active:nth-of-type(2) > a, 
 
.navbar-inverse .navbar-nav > .active:nth-of-type(2) > a:hover, 
 
.navbar-inverse .navbar-nav > .active:nth-of-type(2) > a:focus { 
 
    color: blue; 
 
} 
 

 
.navbar-inverse .navbar-nav > .active:nth-of-type(3) > a, 
 
.navbar-inverse .navbar-nav > .active:nth-of-type(3) > a:hover, 
 
.navbar-inverse .navbar-nav > .active:nth-of-type(3) > a:focus { 
 
    color: green; 
 
} 
 

 
#red, 
 
#blue, 
 
#green { 
 
    width: 100%; 
 
    height: 1000px; 
 
} 
 
#red { background: red; } 
 
#blue { background: blue; } 
 
#green { background: green; }

<body data-spy="scroll" data-target="#navbar" data-offset="60"> 
 
    <nav id="navid" class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#red">red</a></li> 
 
      <li><a href="#blue">blue</a></li> 
 
      <li><a href="#green">green</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
    <div id="red"></div> 
 
    <div id="blue"></div> 
 
    <div id="green"></div> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
</body>

第2の解決策。 CSSとjQueryによる。

https://jsfiddle.net/glebkema/kbggfwhk/

$(document).ready(function() { 
 
    var selectWindow = $(window); 
 
    var selectBody = $('body,html'); 
 
    var selectRed = $('#red'); 
 
    var selectBlue = $('#blue'); 
 
    var selectGreen = $('#green'); 
 

 
    var NAVBAR = '.sticky-header'; 
 
    var menuRed = $(NAVBAR + '>ul>li:nth-of-type(1)'); 
 
    var menuBlue = $(NAVBAR + '>ul>li:nth-of-type(2)'); 
 
    var menuGreen = $(NAVBAR + '>ul>li:nth-of-type(3)'); 
 

 
    var OFFSET = $(NAVBAR).outerHeight(); 
 
    var scrollRed = selectRed.offset().top - OFFSET; 
 
    var scrollBlue = selectBlue.offset().top - OFFSET; 
 
    var scrollGreen = selectGreen.offset().top - OFFSET; 
 
    
 
    menuRed.click(function(){ scrollTo(scrollRed) }); 
 
    menuBlue.click(function(){ scrollTo(scrollBlue) }); 
 
    menuGreen.click(function(){ scrollTo(scrollGreen) }); 
 

 
    selectWindow.scroll(function() { 
 
    var currentY = $(this).scrollTop(); 
 
    if (currentY >= scrollGreen) { checkActive(menuGreen); } else 
 
    if (currentY >= scrollBlue) { checkActive(menuBlue); } else 
 
    if (currentY >= scrollRed) { checkActive(menuRed); }; 
 
    }); 
 

 
    function scrollTo(scrollTopNew) { 
 
    selectBody.stop().animate({scrollTop: scrollTopNew}, 1000); 
 
    } 
 
    
 
    function checkActive(e) { 
 
    if(!e.hasClass('active')) { 
 
     $(NAVBAR + '>ul>li.active').removeClass('active'); 
 
     e.addClass('active'); 
 
    } 
 
    } 
 
}); //jQuery

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.sticky-header { 
 
    background-color: #393939; 
 
    height: 50px; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 

 
.sticky-header ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
.sticky-header li { 
 
    display: inline-block; 
 
} 
 
.sticky-header li a { 
 
    color: white; 
 
    display: inline-block; 
 
    font-size: 20px; 
 
    line-height: 50px; /* = height of .sticky-header */ 
 
    padding: 0 15px; 
 
    text-decoration: none; 
 
} 
 
.sticky-header li a:hover { 
 
    background-color: #555; 
 
} 
 
.sticky-header > ul > li:nth-of-type(1).active a { color: red; } 
 
.sticky-header > ul > li:nth-of-type(2).active a { color: blue; } 
 
.sticky-header > ul > li:nth-of-type(3).active a { color: green; } 
 

 
#red, 
 
#blue, 
 
#green { 
 
    height: 1000px; 
 
    width: 100%; 
 
} 
 
#red { background: red; } 
 
#blue { background: blue; } 
 
#green { background: green; }

<div class="sticky-header"> 
 
    <ul> 
 
    <li class="active"><a href="#">red</a></li> 
 
    <li><a href="#">blue</a></li> 
 
    <li><a href="#">green</a></li> 
 
    </ul> 
 
</div> 
 
<div id="red"></div> 
 
<div id="blue"></div> 
 
<div id="green"></div> 
 

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

出典

2016-05-24 11:06:26

うわー、これは巨大な仕事です！大いに感謝する！私はできるだけ早くそれを試みます。固定のnavbarについて、私はスクリプトを使用しています。それが画面の上部にある場合、ナビゲーションバーに移動します。だから私は、ハイライトのための問題ではないことを願っています。私はそれを試してみるとすぐに私は答えます。 –

私はこれを次のようにして管理しました：https://jsfiddle.net/sjhpmzuk/4/あなたのご協力と時間をいただきありがとうございます！ –

@HonzisNovákjQueryとCSS、https://jsfiddle.net/glebkema/kbggfwhk/を使用して、私のバージョンのソリューションを追加しました。 –

ハイライトナビゲーションバー李画面

答えて

関連する問題