HTML 右边菜单栏如何在一定范围内滚动？

Question

如两图所示，创建的右侧菜单栏会随着滚轮跑到上方的banner区域和下方footer区域。

代码内容在这个链接里：http://jsrun.net/iKvKp/edit

可打开看效果的链接：http://jsrun.net/user/explorer/

中间内容部分有单独设定区域，在HTML里面是article区域，想要右侧菜单栏在这个区域跟随鼠标滚动，不会进入上方的banner和下方的footer区域，要怎么设定？

Answer 1

• 右侧菜单 position:absolute 定位 放进 article 里 article 要relative 定位。
• 然后 js监听页面scroll事件里面，通过 初始top值与页面的 scrollTop值作比较，动态设置 右侧菜单的 top 值。

scroll 事件{
    if(scrollTop>初始top值)
    {
        //说明向上滚要超过banner。 
        style.top = scrollTop
    }else if( scrollTop< (初始top值 - 屏幕高度 ) ){
        // 说明向下滚要超过footer。 
        style.top = scrollTop+屏幕高度
    }else{
        style. top = 初始top值
    }
}

Answer 2

fixed偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。所以你的banner和footer视图区域够大，是会显示在上面的。一定要在中间内容的话，估计只能以中间内容最父级节点定位，但是可能就会存在只能在内容区域可见你的菜单栏

Answer 3

position:fixed 根据窗口定位