• 七角七分博客欢迎大家光临

一段很好用的侧边栏跟随滚动代码

随笔 七七 2年前 (2021-12-26) 0个评论

用以下代码,加上自己设置一下CSS样式,在DIV中调用,实现网页中某板块跟随网页滚动效果。

        <script type="text/javascript">
        var mt = 0;
        window.onload = function () {
            var mydiv = document.getElementById("mydiv");
            var mt = mydiv.offsetTop;
            window.onscroll = function () {
                var t = document.documentElement.scrollTop || document.body.scrollTop;
                if (t > mt) {
                    mydiv.style.position = "fixed";
                    mydiv.style.margin = "0 0px";
                    mydiv.style.top = "0";
                }
                else {
                    mydiv.style.margin = "0px 0px";
                    mydiv.style.position = "static";
                }
            }
        }

    </script>
<div id="mydiv" class="mydiv">内容</div>

 

演示效果可在http://www.jrjjxx.cn查看,如果实现网页导航滚动,可参考网页导航浮动 七角七分 (qjqf.com)

喜欢 (2)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址