スクロールエフェクトをクリックしても動作させる

Question

スクロール中に視覚的に変更された固定アンカーリンクメニューを構成しました。ページをスクロールするだけでなく、アンカーをクリックしてこの変更を行うにはどうすればよいですか？私がスクロールを避け、アンカーリンクを直接使用すると、ビジュアルは変化しません。あなたたちが私を助けてくれることを願っています。

HTML

<div id="pointer"> 
    <a href="#first"><span class="one"></span></a> 
    <a href="#second"><span class="two"></span></a> 
    <a href="#third"><span class="three"></span></a> 
    <a href="#fourth"><span class="four"></span></a> 
    <a href="#areaTest"><span class="five"></span></a> 
</div> 

CSS

body{background-color: #003333;} 

#pointer{ 
    position: fixed; 
    top: 50%; 
    left: 50px; 
} 

#pointer span{ 
    display: block; 
    height: 13px; 
    width: 25px; 
    border-top-color: #999999; 
    border-top-style: solid; 
    border-top-width: 1px; 
} 

JS

$(function() { 

    $(window).on('wheel', function(e) { 

    var delta = e.originalEvent.deltaY; 
    var windowScrollTop = $(this).scrollTop(); 

    if (delta > 0) { 
    //scroll-down 
     if(windowScrollTop > 0){ 
     $(".one").css("border-top-color","#fff").animate({width: '50px'}, 100); 
     } 
     if(windowScrollTop > 350){ 
     $(".two").css("border-top-color","#fff").animate({width: '50px'}, 100); 
     } 
     if(windowScrollTop > 750){ 
     $(".three").css("border-top-color","#fff").animate({width: '50px'}, 100); 
     } 
     if(windowScrollTop > 1150){ 
     $(".four").css("border-top-color","#fff").animate({width: '50px'}, 100); 
     } 
     if(windowScrollTop > 1500){ 
     $(".one, .two, .three, .four, .five").css("border-top-color","#999999"); 
     $(".five").animate({width: '50px'}, 100); 
     $("body").css('background-color', '#fff'); 
     } 
    } 
    else { 
    //scroll-up 
     if(windowScrollTop < 350){ 
     $(".two").css("border-top-color","#999999").animate({width: '25px'}, 100); 
     } 
     if(windowScrollTop < 750){ 
     $(".three").css("border-top-color","#999999").animate({width: '25px'}, 100); 
     } 
     if(windowScrollTop < 1150){ 
     $(".four").css("border-top-color","#999999").animate({width: '25px'}, 100); 
     } 
     if(windowScrollTop < 1500){ 
     $(".one, .two, .three, .four, .five").css("border-top-color","#fff"); 
     $(".five").animate({width: '25px'}, 100); 
     $("body").css('background-color', '#003333'); 
     } 
    } 
    }); 
}); 

Answer 1

あなたは同じように動作するメニューを希望ユーザーがページをスクロールしたときに表示されます。

メニュー項目をクリックすると、ページが指定されたdivにスクロールし、メニューがそれに応じて反応するはずです。

あなたは以下に説明可能な解決策を見つけることができます。各メニュー項目にクリックハンドラを追加

1. を（ジャバスクリプトコメント// S1を参照）

2. からハッシュを使用して、ターゲットのdivのidを構築クリックされたメニュー項目 （// S2）

3. スクロール文書対象のdiv（// S3）のオフセットを先頭に
4. はmyEffectsCliを呼び出すことで、メニューのレンダリング効果を適用しますCK（E）（// S4と以下の関数定義。）

HTH

//IIF to avoid polluting global namespace 
 
(function() { 
 

 
    $(function() { 
 
    //S1 - add click handler to each menu item 
 
    $("#pointer > a").each(function(k, v) { 
 
     $(v).click(function(e) { 
 
     //S2 - build target div id using hash from clicked menu item 
 
     var targetId = 'target-' + e.originalEvent.currentTarget.hash.slice(1); 
 
     //S3 - scroll document to top offset of target div 
 
     $('body').scrollTop($('#' + targetId).offset().top); 
 
     //S4 - apply menu rendering effects _without_ taking deltaY into account 
 
     myEffectsClick(e); 
 
     }); 
 
    }); 
 

 
    $(window).on('wheel', function(e) { 
 
     myEffectsScroll(e); 
 
    }); 
 
    }); 
 
    //no deltaY since we're not scrolling 
 
    function myEffectsClick(e) { 
 
     var windowScrollTop = $(this).scrollTop(); 
 
     //'reset' menu as if we had scrolled up 
 
     scrollUp(windowScrollTop); 
 
     //add any applicable effects based on current position 
 
     scrollDown(windowScrollTop); 
 
    } 
 
    //apply effects when scrolling 
 

 
    function myEffectsScroll(e) { 
 
    var delta = e.originalEvent.deltaY; 
 
    var windowScrollTop = $(this).scrollTop(); 
 

 
    if (delta > 0) { 
 
     //scroll-down 
 
     scrollDown(windowScrollTop); 
 
    } else { 
 
     //scroll-up 
 
     scrollUp(windowScrollTop); 
 
    } 
 
    } 
 

 

 

 
    function scrollUp(windowScrollTop) { 
 
    if (windowScrollTop < 350) { 
 
     $(".two").css("border-top-color", "#999999").animate({ 
 
     width: '25px' 
 
     }, 100); 
 
    } 
 
    if (windowScrollTop < 750) { 
 
     $(".three").css("border-top-color", "#999999").animate({ 
 
     width: '25px' 
 
     }, 100); 
 
    } 
 
    if (windowScrollTop < 1150) { 
 
     $(".four").css("border-top-color", "#999999").animate({ 
 
     width: '25px' 
 
     }, 100); 
 
    } 
 
    if (windowScrollTop < 1500) { 
 
     $(".one, .two, .three, .four, .five").css("border-top-color", "#fff"); 
 
     $(".five").animate({ 
 
     width: '25px' 
 
     }, 100); 
 
     $("body").css('background-color', '#003333'); 
 
    } 
 
    } 
 

 
    function scrollDown(windowScrollTop) { 
 
    if (windowScrollTop > 0) { 
 
     $(".one").css("border-top-color", "#fff").animate({ 
 
     width: '50px' 
 
     }, 100); 
 
    } 
 
    if (windowScrollTop > 350) { 
 
     $(".two").css("border-top-color", "#fff").animate({ 
 
     width: '50px' 
 
     }, 100); 
 
    } 
 
    if (windowScrollTop > 750) { 
 
     $(".three").css("border-top-color", "#fff").animate({ 
 
     width: '50px' 
 
     }, 100); 
 
    } 
 
    if (windowScrollTop > 1150) { 
 
     $(".four").css("border-top-color", "#fff").animate({ 
 
     width: '50px' 
 
     }, 100); 
 
    } 
 
    if (windowScrollTop > 1500) { 
 
     $(".one, .two, .three, .four, .five").css("border-top-color", "#999999"); 
 
     $(".five").animate({ 
 
     width: '50px' 
 
     }, 100); 
 
     $("body").css('background-color', '#fff'); 
 
    } 
 
    } 
 

 

 
}());

body { 
 
    background-color: #003333; 
 
} 
 
#pointer { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50px; 
 
} 
 
#pointer span { 
 
    display: block; 
 
    height: 13px; 
 
    width: 25px; 
 
    border-top-color: #999999; 
 
    border-top-style: solid; 
 
    border-top-width: 1px; 
 
} 
 
div.scroll-target { 
 
    height: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div style="height:200px">Test.</div> 
 
<div id="pointer"> 
 
    <a href="#first"><span class="one"></span></a> 
 
    <a href="#second"><span class="two"></span></a> 
 
    <a href="#third"><span class="three"></span></a> 
 
    <a href="#fourth"><span class="four"></span></a> 
 
    <a href="#areaTest"><span class="five"></span></a> 
 
</div> 
 
<div> 
 
    <div id="target-first" class="scroll-target"> 
 
    T1 
 
    </div> 
 
    <div id="target-second" class="scroll-target"> 
 
    T2 
 
    </div> 
 
    <div id="target-third" class="scroll-target"> 
 
    T3 
 
    </div> 
 
    <div id="target-fourth" class="scroll-target"> 
 
    T4 
 
    </div> 
 
</div> 
 
<div style="height:2000px">So that we can scroll...</div>