问题描述

用HTML和css和js怎样实现随着页面滑动？

div标签跟着滑动但始终在视线里！刚开始div在页面中间 随着页面的往下滑动，div也随之向上滑动，直到div滑动到顶端，页面继续下滑，div在页面顶端保持不变！整个过程 div标签内容始终可见！

解决方案

这个太简单了！完全用CSS控制就可以了，页面在滚动，给这个DIV设置position:fixed;那么页面不管怎么滚动，这个DIV是中在顶端

解决方案二：

显示合作div absolute定位，判断滚动到div位置的时候设置position为fixed，同时设置top为0

  <div style="height:500px;background:#999"></div>
<div id="fixedMenu" style="background:#eee;width:100%;">我是菜单，我到页头会固定</div>
<div style="height:900px;background:#999"></div>
<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>
<script type="text/javascript">
    $(function () {
        var ie6 = /msie 6/i.test(navigator.userAgent)
        , dv = $('#fixedMenu'), st;
        dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
        $(window).scroll(function () {
            st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
            if (st >= parseInt(dv.attr('otop'))) {
                if (ie6) {//IE6不支持fixed属性，所以只能靠设置position为absolute和top实现此效果
                    dv.css({ position: 'absolute', top: st });
                }
                else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
            } else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
        });
    });

</script>

http://www.coding123.net/article/20121101/javascript-fix-guider-when-scroll-to-top.aspx

解决方案三：

这是我之前写的一个实现，也是基于这样的要求，大致思路就是滚动条滚动时触发事件：对页面y轴偏移量进行判断，如果大于某个值（具体情况具体应对），克隆原来的层，设置新的id，新的id意味着新的css样式：position：fixed，然后隐藏原来的层，添加克隆的层； 否则，即向上滑动到一定位置时，remove克隆的层，显示隐藏的层，达到目的~
代码仅供参考，很久前写的了，不懂的问我。。。

    $(window).scroll(function(){
        if(window.pageYOffset>108){
            if($("#topbar").length == 0){
                var x=$("#wrap_most_used_bookmark").clone();
                x.attr("id","topbar");
                $("body").append(x);        

                $("#return_top").fadeIn();
            }
        }
        else{
            $("#topbar").remove();
            $("#return_top").fadeOut();
        }
    });