如何根據滾動選擇菜單項？

我在帶滾動和積極的菜單代碼中的問題，... 這裏是我的代碼和小提琴鏈接https://jsfiddle.net/ajm7Ljwu/如何根據滾動選擇菜單項？

只是檢查頁面3和第4的菜單，而滾動向下和向上.. 請幫我...謝謝（請不要給有關jQuery的任何解決方案）

CSS

<style type="text/css"> 
        a{ 
         position: fixed; 
        } 
        div{ 
         float:left; 
         width:100px; 
        } 
        p{ 
         height:500px; 
        } 
       </style>

HTML

<div> 
     <a href="" class="ele elemMe1">1</a><br> 
     <a href="" class="ele elemMe2">2</a><br> 
     <a href="" class="ele elemMe3">3</a><br> 
     <a href="" class="ele elemMe4">4</a><br> 
    </div> 

    <div> 
     <p class="elemMe" id="elemMe1">1</p> 
     <p class="elemMe" id="elemMe2">2</p> 
     <p class="elemMe" id="elemMe3">3</p> 
     <p class="elemMe" id="elemMe4">4</p> 
    </div>

的JavaScript

<script type="text/javascript"> 
    var currentPagePosition = pageYOffset; 


     window.onscroll = function(e){ 
      var allDiv = document.getElementsByClassName('elemMe'); 
       console.log(allDiv); 


       for(var i = 0; i < allDiv.length; i++){ 


        if(pageYOffset > allDiv[i].offsetTop-allDiv[i].offsetHeight-100){ 


         var p_id = allDiv[i].attributes['id'].value; 
         var currentMenu = document.getElementsByClassName(p_id); 



         currentMenu[0].style.color = "red"; 


        }else if(pageYOffset < allDiv[i].offsetTop-allDiv[i].offsetHeight){ 
         currentMenu[0].style.color = 'black'; 
        } 

       } 


     }; 

</script>

來源

2016-03-04 Akshay Kumar

試試這個。

var currentPagePosition = pageYOffset; 
 
window.onscroll = function(e){ 
 
    var allDiv = document.getElementsByClassName('elemMe'); 
 
    for(var i = 0; i < allDiv.length; i++){ 
 
    var p_id = allDiv[i].attributes['id'].value; 
 
    var currentMenu = document.getElementsByClassName(p_id); 
 
    if(pageYOffset > allDiv[i].offsetTop-allDiv[i].offsetHeight){ 
 
     currentMenu[0].style.color = "#FE0000"; 
 
    }else if(pageYOffset < allDiv[i].offsetTop-allDiv[i].offsetHeight){ 
 
     currentMenu[0].style.color = '#000'; 
 
    }else { 
 
     currentMenu[0].style.color = 'black'; 
 
    } 
 
    } 
 
};

a{ 
 
\t \t \t position: fixed; 
 
\t \t } 
 
\t \t div{ 
 
\t \t \t float:left; 
 
\t \t \t width:100px; 
 
\t \t } 
 
\t \t p{ 
 
\t \t \t height:500px; 
 
\t \t }

<div> 
 
\t <a href="" class="ele elemMe1">1</a><br> 
 
\t <a href="" class="ele elemMe2">2</a><br> 
 
\t <a href="" class="ele elemMe3">3</a><br> 
 
\t <a href="" class="ele elemMe4">4</a><br> 
 
</div> 
 

 
<div> \t 
 
\t <p class="elemMe" id="elemMe1">1</p> 
 
\t <p class="elemMe" id="elemMe2">2</p> 
 
\t <p class="elemMe" id="elemMe3">3</p> 
 
\t <p class="elemMe" id="elemMe4">4</p> 
 
</div>

來源

2016-03-04 07:27:52

如何根據滾動選擇菜單項？

回答

相關問題