开发者社区> 问答> 正文

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

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

展开
收起
小旋风柴进 2016-03-12 10:45:41 2866 0
1 条回答
写回答
取消 提交回答
  • 显示合作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>
    2019-07-17 19:00:23
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript异步编程 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载

相关实验场景

更多