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