脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS固定DIV随滚动条滚动效果(这技术现在很流行，各大B2C网站都有)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

我直接贴出代码：

<style tyPE="text/css">
&nbsp;   .county_cs{ posITion:fixed; top:0px; background-color:#cdcdcd; width:100%;}
    </style>

 

 

<p id="xsun">xsun</p>

<script type="text/javascript">
    VAR FixedBox = function (el) {
        this.element = el;
        this.BoxY = getXY(this.element).y;
    }
    FixedBox.PRototype = {
        setCss: function () {
            var windowST = (document.COMpatMode && document.compatMode != "CSS1Compat") ? document.body.scrollTop : document.documentElement.scrollTop || window.pageYOffset;
            if (windowST > this.BoxY) {
                //this.element.style.cssText = "position:fixed; top:0px; background-color:#cdcdcd;width:100%";
                $(this.element).addClass("county_cs");
            } else {
                $(this.element).removeClass("county_cs");
                //this.element.style.cssText = "";
            }
        }
    };
    //添加事件
    function addEvent(elm, evType, fn, useCapture) {
        if (elm.addEventListener) {
            elm.addEventListener(evType, fn, useCapture);
            return true;
        } else if (elm.attachEvent) {
            var r = elm.attachEvent('on' + evType, fn);
            return r;
        }
        else {
            elm['on' + evType] = fn;
        }
    }
    //获取元素的XY坐标；
    function getXY(el) {
        return document.documentElement.getBoundingClientRect &amp;& (function () {//取元素坐标，如元素或其上层元素设置position relative
            var pos = el.getBoundingClientRect();
            return { x: pos.left + document.documentElement.scrollLeft, y: pos.top + document.documentElement.scrollTop };
        })() || (function () {
            var _x = 0, _y = 0;
            do {
                _x += el.offsetLeft;
                _y += el.offsetTop;
            } while (el = el.offsetParent);
            return { x: _x, y: _y };
        })();
    }
    //实例化；
    var pXsun = new FixedBox(document.getElementById("xsun"));
    addEvent(window, "scroll", function () {
        pXsun.setcss();
    });
   
   
</script>

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JS固定DIV随滚动条滚动效果(这技术现在很流行，各大B2C网站都有)全部内容，希望文章能够帮你解决javascript代码实例教程-JS固定DIV随滚动条滚动效果(这技术现在很流行，各大B2C网站都有)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。