javascript - 如何根据滚动选择菜单项？

Question

我的代码中的滚动和事件菜单有问题，...... 这是我的代码和 fiddle 链接 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>

Answer 1

试试这个。

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{
			position: fixed;
		}
		div{
			float:left;
			width:100px;
		}
		p{
			height:500px;
		}

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