JS实现右侧边栏随滚动条滚动效果
Tag:
滚动 栏目
JS实现右侧边栏随滚动条滚动效果。
如下所示：在html页面中加入以下代码，即可实现左侧内容如果比右侧长的话，鼠标随着滚动条滚动左侧，右侧自动保持相对停止的效果。
HTML页面代码源码：
<aside id="sidebar" class="hidden-sm-md-lg fr">
<div class="theiaStickySidebar">
<section class="mb">
<script>dy("articlerightT");</script>
</section>
<section id="aside_hot" class="widget widget_aside_hot sb br mb">
<p class="c-title mb"><span class="name">栏目更新</span></p>
<ul class="widget-content aside_hot">
<li class="clearfix">
<span class="list list-1">1.</span><a href="http://www.liuxuepaper.com/jiqiao/813229.html" title="英语写作满分万能模板" target="_blank">英语写作满分万能模板</a></li>
<li class="clearfix">
<span class="list list-1">2.</span><a href="http://www.liuxuepaper.com/jiqiao/813055.html" title="英语四级作文常用的70个基本表达" target="_blank">英语四级作文常用的70个基本表达</a></li>
<li class="clearfix">
<span class="list list-1">3.</span><a href="http://www.liuxuepaper.com/jiqiao/812971.html" title="七种写作题型实用模板" target="_blank">七种写作题型实用模板</a></li>
<li class="clearfix">
<span class="list list-1">4.</span><a href="http://www.liuxuepaper.com/jiqiao/812936.html" title="新学期开学第一天英语作文" target="_blank">新学期开学第一天英语作文</a></li>
<li class="clearfix">
<span class="list list-1">5.</span><a href="http://www.liuxuepaper.com/jiqiao/812296.html" title="【推荐】英文信件高分写作模板及范文" target="_blank">【推荐】英文信件高分写作模板及范文</a></li>
<li class="clearfix">
<span class="list list-1">6.</span><a href="http://www.liuxuepaper.com/jiqiao/812293.html" title="Notice通知信写作方法及范文" target="_blank">Notice通知信写作方法及范文</a></li>
<li class="clearfix">
<span class="list list-1">7.</span><a href="http://www.liuxuepaper.com/jiqiao/812219.html" title="对比观点类英语作文模板及参考范文" target="_blank">对比观点类英语作文模板及参考范文</a></li>
<li class="clearfix">
<span class="list list-1">8.</span><a href="http://www.liuxuepaper.com/jiqiao/812217.html" title="英文通知可套用句式及模板" target="_blank">英文通知可套用句式及模板</a></li>
<li class="clearfix">
<span class="list list-1">9.</span><a href="http://www.liuxuepaper.com/jiqiao/812163.html" title="劝慰信和建议信模板" target="_blank">劝慰信和建议信模板</a></li>
<li class="clearfix">
<span class="list list-1">10.</span><a href="http://www.liuxuepaper.com/jiqiao/811451.html" title="英语老师自我介绍范文" target="_blank">英语老师自我介绍范文</a></li>
</ul>
</section>
<section>
<script>dy("articlerightC");</script>
</section>
<section id="aside_hot_comment" class="widget widget_aside_hot_comment sb br mb">
<p class="c-title mb"><span class="name">热门文章</span></p>
<ul class="widget-content aside_hot_comment">
<li class="list clearfix"><a href="http://www.liuxuepaper.com/jiqiao/812936.html" title="新学期开学第一天英语作文" target="_blank"><span class="img-wrap"><img src="/static/upload/2024/08/15/202408157673.png" alt="新学期开学第一天英语作文" class="img-cover br random-img"></span>
<div class="new-text">
<p class="title">新学期开学第一天英语作文</p>
<div class="info"><span class="time"><i class="iconfont icon-time"></i>2024-08-15</span></div>
</div>
</a></li>
<li class="list clearfix"><a href="http://www.liuxuepaper.com/jiqiao/813229.html" title="英语写作满分万能模板" target="_blank"><span class="img-wrap"><img src="/static/upload/2024/09/04/202409043436.jpg" alt="英语写作满分万能模板" class="img-cover br random-img"></span>
<div class="new-text">
<p class="title">英语写作满分万能模板</p>
<div class="info"><span class="time"><i class="iconfont icon-time"></i>2024-09-04</span></div>
</div>
</a></li>
<li class="list clearfix"><a href="http://www.liuxuepaper.com/jiqiao/60138.html" title="建议做法类英语作文写作思路" target="_blank"><span class="img-wrap"><img src="/static/upload/image/20210121/1611202427410552.png" alt="建议做法类英语作文写作思路" class="img-cover br random-img"></span>
<div class="new-text">
<p class="title">建议做法类英语作文写作思路</p>
<div class="info"><span class="time"><i class="iconfont icon-time"></i>2021-01-21</span></div>
</div>
</a></li>
<li class="list clearfix"><a href="http://www.liuxuepaper.com/jiqiao/60142.html" title="观点看法类英语作文模板" target="_blank"><span class="img-wrap"><img src="/nopic.png" alt="观点看法类英语作文模板" class="img-cover br random-img"></span>
<div class="new-text">
<p class="title">观点看法类英语作文模板</p>
<div class="info"><span class="time"><i class="iconfont icon-time"></i>2021-01-21</span></div>
</div>
</a></li>
<li class="list clearfix"><a href="http://www.liuxuepaper.com/jiqiao/60147.html" title="活动计划类英语作文模板" target="_blank"><span class="img-wrap"><img src="/static/upload/image/20210121/1611203174654266.png" alt="活动计划类英语作文模板" class="img-cover br random-img"></span>
<div class="new-text">
<p class="title">活动计划类英语作文模板</p>
<div class="info"><span class="time"><i class="iconfont icon-time"></i>2021-01-21</span></div>
</div>
</a></li>
<li class="list clearfix"><a href="http://www.liuxuepaper.com/jiqiao/60148.html" title="热点话题类好句积累" target="_blank"><span class="img-wrap"><img src="/static/upload/image/20210121/1611203251948852.png" alt="热点话题类好句积累" class="img-cover br random-img"></span>
<div class="new-text">
<p class="title">热点话题类好句积累</p>
<div class="info"><span class="time"><i class="iconfont icon-time"></i>2021-01-21</span></div>
</div>
</a></li>
</ul>
</section>
<section id="divTags" class="widget widget_tags sb br mb">
<p class="c-title mb"><span class="name">Advertisement</span></p>
<ul class="widget-content divTags"><script>dy("articlerightB");</script></ul>
</section>
</div>
</aside>JS代码源码：
! function(f) {
f.fn.theiaStickySidebar = function(X) {
function g(X, g) {
var d = R(X, g);
d || (console.log("TSS: Body width smaller than options.minWidth. Init is delayed."), f(document).on("scroll." + X.namespace, function(X, g) {
return function(d) {
var Y = R(X, g);
Y && f(this).unbind(d)
}
}(X, g)), f(window).on("resize." + X.namespace, function(X, g) {
return function(d) {
var Y = R(X, g);
Y && f(this).unbind(d)
}
}(X, g)))
}
function R(X, g) {
return X.initialized === !0 || !(f("body").width() < X.minWidth) && (d(X, g), !0)
}
function d(X, g) {
X.initialized = !0;
var R = f("#theia-sticky-sidebar-stylesheet-" + X.namespace);
0 === R.length && f("head").append(f('<style id="theia-sticky-sidebar-stylesheet-' + X.namespace + '">.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>')), g.each(function() {
function g() {
d.fixedScrollTop = 0, d.sidebar.css({
"min-height": "1px"
}), d.stickySidebar.css({
position: "static",
width: "",
transform: "none"
})
}
function R(X) {
var g = X.height();
return X.children().each(function() {
g = Math.max(g, f(this).height())
}), g
}
var d = {};
if (d.sidebar = f(this), d.options = X || {}, d.container = f(d.options.containerSelector), 0 == d.container.length && (d.container = d.sidebar.parent()), d.sidebar.parents().css("-webkit-transform", "none"), d.sidebar.css({
position: d.options.defaultPosition,
overflow: "visible",
"-webkit-box-sizing": "border-box",
"-moz-box-sizing": "border-box",
"box-sizing": "border-box"
}), d.stickySidebar = d.sidebar.find(".theiaStickySidebar"), 0 == d.stickySidebar.length) {
var gf = /(?:text|application)\/(?:x-)?(?:javascript|ecmascript)/i;
d.sidebar.find("script").filter(function(f, X) {
return 0 === X.type.length || X.type.match(gf)
}).remove(), d.stickySidebar = f("<div>").addClass("theiaStickySidebar").append(d.sidebar.children()), d.sidebar.append(d.stickySidebar)
}
d.marginBottom = parseInt(d.sidebar.css("margin-bottom")), d.paddingTop = parseInt(d.sidebar.css("padding-top")), d.paddingBottom = parseInt(d.sidebar.css("padding-bottom"));
var e = d.stickySidebar.offset().top,
D = d.stickySidebar.outerHeight();
d.stickySidebar.css("padding-top", 1), d.stickySidebar.css("padding-bottom", 1), e -= d.stickySidebar.offset().top, D = d.stickySidebar.outerHeight() - D - e, 0 == e ? (d.stickySidebar.css("padding-top", 0), d.stickySidebarPaddingTop = 0) : d.stickySidebarPaddingTop = 1, 0 == D ? (d.stickySidebar.css("padding-bottom", 0), d.stickySidebarPaddingBottom = 0) : d.stickySidebarPaddingBottom = 1, d.previousScrollTop = null, d.fixedScrollTop = 0, g(), d.onScroll = function(d) {
if (d.stickySidebar.is(":visible")) {
if (f("body").width() < d.options.minWidth) return void g();
if (d.options.disableOnResponsiveLayouts) {
var gf = d.sidebar.outerWidth("none" == d.sidebar.css("float"));
if (gf + 50 > d.container.width()) return void g()
}
var e = f(document).scrollTop(),
D = "static";
if (e >= d.sidebar.offset().top + (d.paddingTop - d.options.additionalMarginTop)) {
var dU, a = d.paddingTop + X.additionalMarginTop,
gb = d.paddingBottom + d.marginBottom + X.additionalMarginBottom,
I = d.sidebar.offset().top,
b = d.sidebar.offset().top + R(d.container),
S = 0 + X.additionalMarginTop,
bE = d.stickySidebar.outerHeight() + a + gb < f(window).height();
dU = bE ? S + d.stickySidebar.outerHeight() : f(window).height() - d.marginBottom - d.paddingBottom - X.additionalMarginBottom;
var gM = I - e + d.paddingTop,
dY = b - e - d.paddingBottom - d.marginBottom,
bZ = d.stickySidebar.offset().top - e,
c = d.previousScrollTop - e;
"fixed" == d.stickySidebar.css("position") && "modern" == d.options.sidebarBehavior && (bZ += c), "stick-to-top" == d.options.sidebarBehavior && (bZ = X.additionalMarginTop), "stick-to-bottom" == d.options.sidebarBehavior && (bZ = dU - d.stickySidebar.outerHeight()), bZ = c > 0 ? Math.min(bZ, S) : Math.max(bZ, dU - d.stickySidebar.outerHeight()), bZ = Math.max(bZ, gM), bZ = Math.min(bZ, dY - d.stickySidebar.outerHeight());
var h = d.container.height() == d.stickySidebar.outerHeight();
D = (h || bZ != S) && (h || bZ != dU - d.stickySidebar.outerHeight()) ? e + bZ - d.sidebar.offset().top - d.paddingTop <= X.additionalMarginTop ? "static" : "absolute" : "fixed"
}
if ("fixed" == D) {
var fR = f(document).scrollLeft();
d.stickySidebar.css({
position: "fixed",
width: Y(d.stickySidebar) + "px",
transform: "translateY(" + bZ + "px)",
left: d.sidebar.offset().left + parseInt(d.sidebar.css("padding-left")) - fR + "px",
top: "0px"
})
} else if ("absolute" == D) {
var eJ = {};
"absolute" != d.stickySidebar.css("position") && (eJ.position = "absolute", eJ.transform = "translateY(" + (e + bZ - d.sidebar.offset().top - d.stickySidebarPaddingTop - d.stickySidebarPaddingBottom) + "px)", eJ.top = "0px"), eJ.width = Y(d.stickySidebar) + "px", eJ.left = "", d.stickySidebar.css(eJ)
} else "static" == D && g();
"static" != D && 1 == d.options.updateSidebarHeight && d.sidebar.css({
"min-height": d.stickySidebar.outerHeight() + d.stickySidebar.offset().top - d.sidebar.offset().top + d.paddingBottom
}), d.previousScrollTop = e
}
}, d.onScroll(d), f(document).on("scroll." + d.options.namespace, function(f) {
return function() {
f.onScroll(f)
}
}(d)), f(window).on("resize." + d.options.namespace, function(f) {
return function() {
f.stickySidebar.css({
position: "static"
}), f.onScroll(f)
}
}(d)), "undefined" != typeof ResizeSensor && new ResizeSensor(d.stickySidebar[0], function(f) {
return function() {
f.onScroll(f)
}
}(d))
})
}
function Y(f) {
var X;
try {
X = f[0].getBoundingClientRect().width
} catch (f) {}
return "undefined" == typeof X && (X = f.width()), X
}
var gf = {
containerSelector: "",
additionalMarginTop: 0,
additionalMarginBottom: 0,
updateSidebarHeight: !0,
minWidth: 0,
disableOnResponsiveLayouts: !0,
sidebarBehavior: "modern",
defaultPosition: "relative",
namespace: "TSS"
};
return X = f.extend(gf, X), X.additionalMarginTop = parseInt(X.additionalMarginTop) || 0, X.additionalMarginBottom = parseInt(X.additionalMarginBottom) || 0, g(X, this), this
}
}(jQuery);
$(document).ready(function() {
$("#sidebar").theiaStickySidebar({
additionalMarginTop: 100
})
});上一篇：故天将降大任于是人也还是斯人也?
下一篇：严禁鼠标右键并复制的JS代码
