13

http://jsfiddle.net/motocomdigital/gUWdJ/


私はjqueryスクロールテクニックを求めています。私のプロジェクトに適応したいと思います。

ここで私のプロジェクトの例をフィドルとして見てくださいhttp://jsfiddle.net/motocomdigital/gUWdJ/

<section>現在、私のナビゲーションリンクが'sを基準にしたスクロールを自動的にアニメーション化することがわかります。

私の質問は、メソッドを使用して、セクションがウィンドウの上部に達したときにクラス$(window).scrollを追加するにはどうすればよいですか？.activenav a

したがって、たとえば、ユーザーが（ナビゲーションリンクではなく）ページを下にスクロールした場合、アクティブクラスに相対ナビゲーションリンクを追加する必要があります。ページのどこにいるかを示します。

ユーザーがページを下にスクロールするときに推測するたびに、アクティブなクラスを削除してから追加する必要があります。

また、固定ナビゲーションバー、オフセットトップウィンドウの28pxの高さを考慮する必要があります。


誰かが私が試して使用または適応できるテクニックを見せてくれますか、あるいは私のjsfiddleを使って見せてくれませんか:)


事前に感謝します、どんな助けでも大歓迎です！


http://jsfiddle.net/motocomdigital/gUWdJ/


ここに画像の説明を入力してください

4

3 に答える 3

45

より一般的な関数が必要な場合：

デモを見る

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('nav').addClass('fixed');
        $('.wrapper section').each(function(i) {
            if ($(this).position().top <= windscroll - 100) {
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');
            }
        });

    } else {

        $('nav').removeClass('fixed');
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }

}).scroll();​
于 2013-01-04T17:10:15.913 に答える
7

あなたはこのようにすることができます：http：//jsfiddle.net/gUWdJ/1/

$(window).scroll(function() {

    if ($(this).scrollTop() < $('section[data-anchor="top"]').offset().top) {
       $('nav a').removeClass('active');
    }

    if ($(this).scrollTop() >= $('section[data-anchor="top"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(0)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="news"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(1)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="products"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(2)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="contact"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(3)').addClass('active');
    }

});
于 2013-01-04T17:06:13.560 に答える
0

メニュー項目が0ではなく負の上部差で点灯することを確認する必要があったため、先に進んでA. Wolfからスクリプトを変更しました。これは、別の関数を作成するよりもはるかにうまく機能し、各メニュー項目のイベントをクリックします。また、メニューの最後の項目を考慮してこのスクリプトを変更します。最後から2番目の項目がである場合は自動的に強調表示されます。メインのハイライト関数の外で各ループを処理したので、私のものは非常に似ていますが異なると思います。私の変更のもう1つの優れた点は、メニュー項目内のリンク内に画像があり、要素の高さを考慮し、その要素の下部がページの上部に当たったとき、つまりハイライトが必要なときです。新しいものがする前に終了します。

function highlight(item)
{
var itemTop = jQuery(item).position().top;

var windowTop = jQuery(window).scrollTop(); 
var topDifference = (windowTop - itemTop); 

var itemHeight = jQuery(item).height();
var bottomDifference = topDifference - itemHeight; 

var menuId = jQuery('#nav-icons li a').attr('href');
if (menuId = item)
{
    if(topDifference > -1 && bottomDifference < 0)
    {
        jQuery("#nav-icons li a[href='" + item + "']").parent().addClass('active');
        jQuery("#nav-icons li a[href!='" + item + "']").parent().removeClass('active');
    }
    else {
        jQuery("#nav-icons li a[href='" + item + "']").parent().removeClass('active');
    }
}
}
jQuery('#nav-icons li a').each(function(){
var eachAttr = jQuery(this).attr('href');
highlight(eachAttr);
});
于 2014-10-15T15:31:04.807 に答える