左右下滑的功能

229 阅读1分钟

之前遇到过右侧导航固定,左侧内容继续下滑的功能,在网上找了几个插件,用着都不是特舒服,后来主管自己写了一个插件,用着不错,我仅仅只是记录一下,方便自己使用,此功能的封装函数并不是自己写的

function HomeScroll(a, b) {        function g() {            var g = $(window).scrollLeft(),                h = $(window).scrollTop(),                i = $(document).height(),                j = $(window).height(),                k = c.height(),                l = d.height(),                m = k > l ? f : e,                n = k > l ? d : c,                o = k > l ? c.offset().left + c.outerWidth(!0) - g : d.offset().left - c.outerWidth(!0) - g,                p = k > l ? l : k,                q = k > l ? k : l,                r = parseInt(q - j) - parseInt(p - j);            $(a + "," + b).removeAttr("style"), j > i || p > q || m > h || p - j + m >= h ? n.removeAttr("style") : j > p && h - m >= r || p > j && h - m >= q - j ? n.attr("style", "margin-top:" + r + "px;") : n.attr("style", "_margin-top:" + (h - m) + "px;position:fixed;left:" + o + "px;" + (j > p ? "top" : "bottom") + ":0;")        }        if ($(a).length > 0 && $(b).length > 0) {            var c = $(a),                d = $(b),                e = c.offset().top,                f = d.offset().top;            $(window).resize(g).scroll(g).trigger("resize")        }    }

在使用的时候,如果是右侧导航固定,就要在左侧的内容样式中写下margin-right = 版心 - (左侧内容宽度 + 右侧导航的宽度)

如果是左侧内容同样道理。

使用: HomeScroll(".left",".right");

效果:


此效果是右侧固定