0

混乱してうまくまとめられない…

  • さまざまなセクションを持つ単一ページの Web サイトを作成しました。
  • jquery.sticky.jsでスティッキーナビゲーションを作りました。
  • http://jsfiddle.net/joshnh/YxRqp/の助けを借りて、現在のタブを強調表示しました。

しかし、ナビゲーションタブは、あるセクションから別のセクションに移動するときに、ハイライトをスクロールして変更しません...

私はウェイポイント、jquery プラグイン ( http://imakewebthings.com/jquery-waypoints/ ) が私を助けることができるが、それが機能しないことをインターネットで赤くしています... 誰かが追加しなければならない js、css、および html コードを教えてもらえますか?それは（ウェイポイントの有無にかかわらず）動作しますか？

HTML

<nav id="mainnav">
    <div class="container">
        <ul class="links">
        <li><a id="homenav" class="scroll" href="#homepage">About</a></li>
        <li><a id="sensnav" class="scroll" href="#parallax1">Sensuality</a></li>
        <li><a id="scennav" class="scroll" href="#parallax2">Scenes</a></li>
        <li><a id="montnav" class="scroll" href="#parallax3">Montage</a></li>
        <li><a id="celenav" class="scroll" href="#parallax4">Celebrities</a></li>
        <li><a id="modenav" class="scroll" href="#parallax5">Mode</a></li>
        <li><a id="portnav" class="scroll" href="#parallax6">Other Portraits</a></li>
        <li><a id="objenav" class="scroll" href="#parallax7">Objects</a></li>
        <li><a id="miscnav" class="scroll" href="#parallax8">Miscellaneous</a></li>
        <li><a id="contnav" class="scroll" href="#contact">Contact</a></li>
        <li><a id="morenav" class="scroll" href="#more">Links & More</a></li>
        </ul>
    </div>
</nav>

<section id="parallax1">
    <h1>Sensuality</h1>
</section>

ハイライト用の JS (index.html の body 部分)

<script>
var main = main = $('#mainnav div ul');

$('.scroll').click(function(event) {

    event.preventDefault();

    var full_url = this.href,
        parts = full_url.split('#'),
        trgt = parts[1],
        target_offset = $('#'+trgt).offset(),
        target_top = target_offset.top;

    $('html, body').animate({scrollTop:target_top}, 500);

    /* Remove active class on any li when an anchor is clicked */

    $('#mainnav div ul').children().removeClass();

    /* Add active class to clicked anchor's parent li */

    $(this).parent().addClass('active');

});
</script>

CSS

nav {
width: 100%;
height: 50px;
position: relative;
z-index: 1000;
background: rgba(26,30,39,0.7);
opacity: 0;
filter: alpha(opacity=0);
}

nav .container {
width: 96%;
}

.links {
height: 50px;
display: table-cell;
vertical-align: middle;
}

.links li {
height: 50px;
display: inline;
margin: 0 15px 0 0;
padding: 2px;
}

.links a {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 20px;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}

.links a:visited {
color: #ffffff;
}

.links a:hover {
color: #b0b825;
}

.links a.current {
color: ffd200;
}

nav#mainnav li.active a { 
color: #ffd200; 
}

ここでライブを見ることができます：http: //photography.igorlaszlo.com

私がしなければならないことを正確に教えてください、私はjavascriptの専門家ではありません...

前もって感謝します ！

4

2 に答える 2

1

これを試してください私はあなたのコードにいくつかの変更を加えました

$(document).ready(function(){
 $("#top1").parent().addClass('active');
var main = main = $('#main ul');

$('.scroll').click(function(event) {

    event.preventDefault();

    var full_url = this.href,
        parts = full_url.split('#'),
        trgt = parts[1],
        target_offset = $('#'+trgt).offset(),
        target_top = target_offset.top;

    $('html, body').animate({scrollTop:target_top}, 500);

    /* Remove active class on any li when an anchor is clicked */

    main.children().removeClass();

    /* Add active class to clicked anchor's parent li */

    $(this).parent().addClass('active');

});

    $(window).scroll(function(event) {
   if($("#top").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
 $("#top1").parent().addClass('active'); 
$("#middle1").parent().removeClass('active'); 
 $("#bottom1").parent().removeClass('active');        
} 
 if($("#middle").offset().top < $(window).scrollTop() + $(window).outerHeight()){
$("#middle1").parent().addClass('active'); 
$("#top1").parent().removeClass('active'); 
 $("#bottom1").parent().removeClass('active'); 
}
 if($("#bottom").offset().top < $(window).scrollTop() + $(window).outerHeight()){
$("#bottom1").parent().addClass('active'); 
  $("#top1").parent().removeClass('active'); 
 $("#middle1").parent().removeClass('active'); 
}       
});
});

Html で id 属性を追加して、次のタグにいくつかの変更を加えました

        <li><a href="#top" class="scroll" id="top1"></a></li>
        <li><a href="#middle" class="scroll" id="middle1"></a></li>
        <li><a href="#bottom" class="scroll" id="bottom1"></a></li>

これが動作中のjsfiddleデモです

これが役に立てば幸いです。

于 2013-08-14T13:31:05.447 に答える
1

私は自分自身に答えを出し、誰かがそれを使用するかもしれません...最終的に、1）タグを固定するためのスムーズスクロール（1ページのWebサイト）、2）ナビゲーションのハイライトアクティブボタン、3）ハイライトが機能するソリューションを見つけましたマウスホイールのスクロールも！

ここでチュートリアルを見つけることができます: http://trevordavis.net/blog/jquery-one-page-navigation-pluginここで私のウェブページのデモ: http://photography.igorlaszlo.com

于 2013-08-24T10:17:42.520 に答える