Javascript 如何根据滚动条选择菜单项？

我的滚动和活动菜单代码有问题，。。。。 这是我的代码和小提琴链接

只需在向下和向上滚动时查看页面的3和4菜单。。 请帮帮我。。。谢谢（请不要给出任何与jquery相关的解决方案）

css

a{
位置：固定；
}
div{
浮动：左；
宽度：100px；
}
p{
高度：500px；
}

html

1
2
3
4

javascript

var currentPagePosition=pageYOffset；
window.onscroll=函数（e）{
var allDiv=document.getElementsByClassName（'elemMe'）；
console.log（allDiv）；
对于（变量i=0；iallDiv[i]。offsetTop allDiv[i]。OffsetSight-100）{
var p_id=allDiv[i]。属性['id']。值；
var currentMenu=document.getElementsByClassName（p_id）；
当前菜单[0]。style.color=“红色”；
}else if（pageYOffset

试试这个

var currentPagePosition=pageYOffset；
window.onscroll=函数（e）{
var allDiv=document.getElementsByClassName（'elemMe'）；
对于（变量i=0；iallDiv[i]。offsetTop allDiv[i]。OffsetSight）{
currentMenu[0]。style.color=“#FE0000”；
}else if（pageYOffset
a{
位置：固定；
}
div{
浮动：左；
宽度：100px；
}
p{
高度：500px；
}









1
2
3
4
试试这个


var currentPagePosition=pageYOffset；
window.onscroll=函数（e）{
var allDiv=document.getElementsByClassName（'elemMe'）；
对于（变量i=0；iallDiv[i]。offsetTop allDiv[i]。OffsetSight）{
currentMenu[0]。style.color=“#FE0000”；
}else if（pageYOffset
a{
位置：固定；
}
div{
浮动：左；
宽度：100px；
}
p{
高度：500px；
}









1
2
3
4

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

   <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>

<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>