来做一个小js效果，原来的菜单在初始化时，状态不变，但是在向下滚动一段后，将菜单定位到右边位置，方便用户操作。
首先做一个演示的html页面
|
1 2 3 4 5 6 7 8 9 10 11 |
<div style="width:1024px; margin:0 auto; margin-top:500px;"> <div style="width:700px; height:5000px; background-color:#A6090B; float:left;"> </div> <div style="width:324px; height:100px; background-color:#1DEC62;float:left;" id="xfd"> <ul> <li>分类一</li> <li>分类二</li> <li>分类三</li> <li>分类四</li> </ul> </div> </div> |
加入我们需要控制的js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script> window.onscroll=function(){ var t=getScrollTop(); if(t > 500){ document.getElementById('xfd').style.marginTop=(t-500)+"px"; }else{ document.getElementById('xfd').style.marginTop=""; } } /** * 获取滚动条高度 */ function getScrollTop() { var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop) { scrollTop=document.documentElement.scrollTop; } else if(document.body) { scrollTop=document.body.scrollTop; } return scrollTop; } </script> |
思路很简单，我们要得到滚动的高度，如果高度大于我们的限定距离，就让我们的菜单margin-top等于加上滚动距离和原来位置的差。
第5，6行的 500数字，是我们在首个div设置margin-top:500px; 可根据页面情况自行调节。