製作滾動效果以及點擊以及

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. 添加一個單擊處理程序給每個菜單項（見JavaScript註釋// 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>