Machen Sie einen Scrolling-Effekt funktioniert auch mit Klick

Question

Ich habe dieses feste Anker-Link-Menü komponiert, dass es beim Scrollen visuell geändert hat. Wie kann ich diese Änderung ALSO vornehmen, indem ich auf den Anker klicke und nicht nur die Seite scrollte? Wenn ich Scrollen meide und direkt die Anker-Links verwende, ändert sich das Sichtbare nicht. Ich hoffe, ihr könnt mir helfen.

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

Sie das Menü möchten die gleiche Art und Weise verhalten wenn geklickt wird und wenn der Benutzer die Seite scrollt.

Wenn Sie auf einen Menüpunkt klicken sollte die Seite zu einem bestimmten div blättern und das Menü sollte entsprechend reagieren.

Sie können eine mögliche Lösung unten finden beschrieben:

1. hinzufügen Click-Handler zu jedem Menüpunkt (siehe Javascript Kommentar // S1)

2. das Ziel div id Bau mit dem Hash aus das Anklicken Menüpunkt (// S2)

3. Scroll Dokument Offset von Ziel div (// S3)
4. Anwenden Menü Effekte Rendering nach oben durch myEffectsCli Aufruf ck (e) (// S4 und Funktionsdefinition unten.)

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>