Question

我的代码中有滚动和活动菜单的问题，.... 这是我的代码和小提琴链接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

试试这个。

＆＃13;

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';
    }
  }
};

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: