如何在使用jQuery在页眉和页脚之间滚动时使侧边栏变粘（不滚动它们）？ [英] How to make a sidebar sticky when scrolling between header and footer with jQuery (without scrolling over them)?
本文介绍了如何在使用jQuery在页眉和页脚之间滚动时使侧边栏变粘（不滚动它们）？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要一个严格的jQuery解决方案来解决这个问题。这是因为我正在使用Wordpress，而我想要粘贴的侧边栏小部件位于< aside> 元素中，我无法达到全高。
与 .scrollTop（）相同的方式检测我在页面下方的距离使侧栏小部件变粘，我需要JS通过分配一个新的固定位置来检测我从页面底部到目前为止取消小部件。
我尝试用 .offset（）但到目前为止我无法使其工作。
function stopDiv（）{
var distance = $（'。footer'）。offset（）。top - $（ '小部件'）偏移（）顶部。;
if（距离< 10）{
$（'。widget'）。css（{
'top'：'auto'，
'bott'：'10px'
}）;
}
}
正如您在侧栏下方的片段中看到的那样应该如此，但是当我达到距离页脚10英尺的距离时，我希望侧边栏假设一个新的固定位置。
我希望侧边栏假设一个新的固定位置在页脚上方的位置，直到用户向上滚动。
编辑 @Benvc下面建议的解决方案在代码段中工作正常，但在我的wordpress网站上却没有。以下是我得到的控制台错误：
scripts.js：18未捕获的ReferenceError：s未定义
在HTMLDocument。< anonymous> （scripts.js：18）
at i（jquery.js：2）
at Object.fireWith [as resolveWith]（jquery.js：2）
at Function.ready（jquery。 js：2）$ HTML $ b在HTMLDocument.K（jquery.js：2）
在HTMLDocument.s（VM11874 rocket-loader.min.js：1）
at p（VM11874 rocket-loader .min.js：1）
at t.simulateStateAfterDeferScriptsActivation（VM11874 rocket-loader.min.js：1）
at Object.callback（VM11874 rocket-loader.min.js：1）
at t.run（VM11874 rocket-loader.min.js：1）
//修复了Widget函数fixDiv（）{var $ cache = $（'。widget'）; if（$（window）.scrollTop（）> 380）$ cache.css（{'position'：'fixed'，'top'：'10px'，'right'：'30px'}）; else $ cache.css（{'position'：'relative'，'top'：'auto'，'right'：'auto'}）; } $（window）.scroll（fixDiv）; fixDiv（）; / *我的尝试函数stopDiv（）{var distance = $（'。footer'）。offset（）。top - $（'。widget'）。offset（）。top; if（距离< 10）{$（'。widget'）。css（{'top'：'auto'，'bottom'：'10px'}）; $（window）.scroll（stopDiv）; stopDiv（）; * /
@import url（'https：// fonts .googleapis.com / css？family = Open + Sans：400,700'）; * {font-family：'Open Sans';颜色：#fff; box-sizing：content-box;} body {padding：0; margin：0;} p {margin：20px;} hr {width：85％; border-style：solid;}。main-content {width：100％;显示：网格; grid-template-columns：repeat（4,1fr）; grid-template-rows：150px auto; grid-template-areas：nav nav nav nav主要主要侧边栏; grid-column-gap：20px; grid-row-gap：0px;}。nav {grid-area：nav; background-color：＃266392;显示：网格; grid-template-columns：1fr 3fr 1fr;}。nav h1 {place-self：center; font-weight：400; font-size：40px; grid-column：2;}。nav i {align-self：center; font-size：40px;}。main {height：1500px;宽度：98％;自我辩解：开始;网格区域：主要;填充：10px;向左飘浮; background-color：＃e8624c;保证金：10px;}。sidebar-container {height：900px;宽度：300px;自我辩解：开始; background-color：＃209B66;网格区域：侧边栏; grid-column：4;上：10px;保证金：10px;填充：20px;显示：网格; grid-template-rows：auto; grid-row-gap：10px;}。sidebar-container> p {display：grid; align-items：start;填充：0; margin：0;}。widget {height：500px;宽度：300px; background-color：＃E3962F;}。footer {background-color：＃333;身高：800px;}
< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< /脚本><身体GT; < div class =main-content> < div class =nav> < h1>粘滞边栏问题< / h1> < i class =fa fa-arrow-downaria-hidden =true>< / i> < / DIV> < div class =main> < p为H. [主要内容]< / p> < / DIV> < div class =sidebar-container> < p> [补充工具栏]< / p> < div class =widget> < p为H. [窗口小部件] LT; / p为H. < / DIV> < / DIV> < / DIV> < div class =footer>< / div>< / body>
解决方案
编辑 - jquery解决方案（原始css仅在下面回答）：
根据您的问题编辑提供额外的约束并使一个html / css唯一的解决方案更加困难，下面是一个jquery解决方案，使用你的代码使用新的jquery为粘性侧边栏小部件和css使侧边栏小部件 position：absolute 和右：30px （该值是任意的，具体取决于您希望窗口小部件位于侧边栏内的确切位置）。此外，还注释掉了一些其他css行，这些行或者没有做任何事情或者干扰了网格布局的响应性（粘性侧边栏功能可以使用或不使用这些更改，尽管您可能需要调整权限您的小部件元素的CSS，包括媒体查询，具体取决于您的布局最终结束的位置。）
$（function（）{const sidebar = $（'。sidebar-container'）; const widget = $（'。widget'）; const footer = $（'。footer '）; const space = 10; //在窗口和窗口小部件之间创建空间的任意值const startTop = sidebar.offset（）。top + 60; //任意开始顶部位置const endTop = footer.offset（）。top - widget.height（） - space; widget.css（'top'，startTop）; $（window）.scroll（function（）{let wind owTop = $（this）.scrollTop（）;让widgetTop = widget.offset（）。top;让newTop = startTop; if（widgetTop> = startTop&& widgetTop< = endTop）{if（windowTop> startTop - space&& windowTop< endTop - space）{newTop = windowTop + space; } else if（windowTop> endTop - space）{newTop = endTop; } widget.stop（）。animate（{'top'：newTop}）; }}; }）;
@import url（'https：// fonts.googleapis.com/css?family=Open+Sans:400,700');* {font-family：'Open Sans';颜色：#fff; box-sizing：content-box;} body {padding：0; margin：0;} p {margin：20px;} hr {width：85％; border-style：solid;}。main-content {width：100％;显示：网格; grid-template-columns：repeat（4,1fr）; grid-template-rows：150px auto; grid-template-areas：nav nav nav nav主要主要侧边栏; grid-column-gap：20px; grid-row-gap：0px;}。nav {grid-area：nav; background-color：＃266392;显示：网格; grid-template-columns：1fr 3fr 1fr;}。nav h1 {place-self：center; font-weight：400; font-size：40px; grid-column：2;}。nav i {align-self：center; font-size：40px;}。main {height：1500px; / *宽度：98％; justify-self：start; * / grid-area：main;填充：10px; / * float：left; * / background-color：＃e8624c;保证金：10px;}。sidebar-container {height：900px;宽度：300px;自我辩解：结束; background-color：＃209B66;网格区域：侧边栏; grid-column：4; / * top：10px; * / margin：10px;填充：20px;显示：网格; grid-template-rows：auto; grid-row-gap：10px;}。sidebar-container> p {display：grid; align-items：start;填充：0; margin：0;}。widget {height：500px;宽度：300px; background-color：＃E3962F;位置：绝对;右：30px;}。页脚{background-color：＃333;身高：800px;}
< body> < div class =main-content> < div class =nav> < h1>粘滞边栏问题< / h1> < i class =fa fa-arrow-downaria-hidden =true>< / i> < / DIV> < div class =main> < p为H. [主要内容]< / p> < / DIV> < div class =sidebar-container> < p> [补充工具栏]< / p> < div class =widget> < p为H. [窗口小部件] LT; / p为H. < / DIV> < / DIV> < / DIV> < div class =footer>< / div> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< / body>
ORIGINAL - css解决方案：
根据您对页脚和浏览器兼容性的要求，您可以获得所需的效果，而无需任何javascript / jquery。您必须对您的html进行微调，将页脚移动到网格外并单独设置样式（我只是为下面的示例添加了高度）。然后，您只需将 position：sticky 和 top：10px 添加到 .sidebar css。
结果是标题滚动后侧边栏开始滚动，然后当它碰到页脚时停止滚动。
<请注意，IE中不支持
position：sticky （有一个 polyfill for sticky ）。 请参阅下面的代码段并调整代码示例：
< pre class =snippet-code-css lang-css prettyprint-override>
body {padding：0; margin：0;} .main-content {width：100％;显示：网格; grid-template-columns：repeat（4,1fr）; grid-template-rows：80px auto 400px; grid-template-areas：nav nav nav navmain main main sidebarfooter footer footer footer; grid-column-gap：20px;网格行间隙：10px;高度：100％;}。nav {grid-area：nav; background-color：＃007ccc;}。main {height：100％;最大宽度：600px;自我辩解：开始;网格区域：主要;填充：10px; float：left;}。sidebar {height：600px;宽度：300px;自我辩解：开始; background-color：＃4BA25E;网格区域：侧边栏; grid-column：4;保证金：10px;位置：粘; top：10px;}。footer {background-color：＃333;身高：400px;}
< body> < div class =main-content> < div class =nav>< / div> < div class =main> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Proin tincidunt tempus nisi，vitae finibus nunc pharetra quis。车辆中的Quisque。 Nullam nec velit sed mi posuere ultricies pellentesque quis nibh。 Morbi consequat，dui在concquat rhoncus，neque nulla posuere odio，非dapibus velit urna在turpis。在feugiat massa orci，vitae scelerisque sem posuere ut。< / p> < p> Phasellus porttitor diam metus。 Suspendisse quis mi sollicitudin，lobortis orci eu，pharetra ex。 Cras ex nibh，dapibus quis tortor a，placerat commodo lorem。 Mauris sed sapien ligula。 Praesent lobortis cursus varius。 Donec vulputate pulvinar interdum。 Suspendisse laoreet malesuada commodo。< / p> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Proin tincidunt tempus nisi，vitae finibus nunc pharetra quis。车辆中的Quisque。 Nullam nec velit sed mi posuere ultricies pellentesque quis nibh。 Morbi consequat，dui在concquat rhoncus，neque nulla posuere odio，非dapibus velit urna在turpis。在feugiat massa orci，vitae scelerisque sem posuere ut。< / p> < p> Phasellus porttitor diam metus。 Suspendisse quis mi sollicitudin，lobortis orci eu，pharetra ex。 Cras ex nibh，dapibus quis tortor a，placerat commodo lorem。 Mauris sed sapien ligula。 Praesent lobortis cursus varius。 Donec vulputate pulvinar interdum。 Suspendisse laoreet malesuada commodo。< / p> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Proin tincidunt tempus nisi，vitae finibus nunc pharetra quis。车辆中的Quisque。 Nullam nec velit sed mi posuere ultricies pellentesque quis nibh。 Morbi consequat，dui在concquat rhoncus，neque nulla posuere odio，非dapibus velit urna在turpis。在feugiat massa orci，vitae scelerisque sem posuere ut。< / p> < p> Phasellus porttitor diam metus。 Suspendisse quis mi sollicitudin，lobortis orci eu，pharetra ex。 Cras ex nibh，dapibus quis tortor a，placerat commodo lorem。 Mauris sed sapien ligula。 Praesent lobortis cursus varius。 Donec vulputate pulvinar interdum。 Suspendisse laoreet malesuada commodo。< / p> < p>在hac habitasse platea dictumst。 Maecenas et mauris nunc。 Aliquam erat volutpat。 Duis eu condimentum ipsum。 Etiam a mattis ipsum，坐在前庭猫科动物。在fermentum purus augue，简历interdum ante gravida non。在tincidunt risus vitae ligula dignissim pellentesque。 Vivamus id est eget metus placerat euismod et nec diam。 Integer luctus bibendum condimentum。< / p> < p> Vestibulum pretium quis mauris id pellentesque。 Donec placerat iaculis ex，ut porta dolor vestibulum ac。 Phasellus nunc tellus，viverra vestibulum posuere eu，faucibus vitae ex。 Aenean efficitur maximus nunc，在sagittis nunc mattis sed。 Vivamus et magna vitae magna interdum sodales。 Ut imperdiet lobortis consectetur。< / p> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Proin tincidunt tempus nisi，vitae finibus nunc pharetra quis。车辆中的Quisque。 Nullam nec velit sed mi posuere ultricies pellentesque quis nibh。 Morbi consequat，dui在concquat rhoncus，neque nulla posuere odio，非dapibus velit urna在turpis。在feugiat massa orci，vitae scelerisque sem posuere ut。< / p> < p> Phasellus porttitor diam metus。 Suspendisse quis mi sollicitudin，lobortis orci eu，pharetra ex。 Cras ex nibh，dapibus quis tortor a，placerat commodo lorem。 Mauris sed sapien ligula。 Praesent lobortis cursus varius。 Donec vulputate pulvinar interdum。 Suspendisse laoreet malesuada commodo。< / p> < p>在hac habitasse platea dictumst。 Maecenas et mauris nunc。 Aliquam erat volutpat。 Duis eu condimentum ipsum。 Etiam a mattis ipsum，坐在前庭猫科动物。在fermentum purus augue，简历interdum ante gravida non。在tincidunt risus vitae ligula dignissim pellentesque。 Vivamus id est eget metus placerat euismod et nec diam。 Integer luctus bibendum condimentum。< / p> < p> Vestibulum pretium quis mauris id pellentesque。 Donec placerat iaculis ex，ut porta dolor vestibulum ac。 Phasellus nunc tellus，viverra vestibulum posuere eu，faucibus vitae ex。 Aenean efficitur maximus nunc，在sagittis nunc mattis sed。 Vivamus etmagna vitae magna interdum sodales。 Ut imperdiet lobortis consectetur。< / p> < p> Vestibulum pretium quis mauris id pellentesque。 Donec placerat iaculis ex，ut porta dolor vestibulum ac。 Phasellus nunc tellus，viverra vestibulum posuere eu，faucibus vitae ex。 Aenean efficitur maximus nunc，在sagittis nunc mattis sed。 Vivamus etmagna vitae magna interdum sodales。 Ut imperdiet lobortis consectetur。< / p> < p> Vestibulum pretium quis mauris id pellentesque。 Donec placerat iaculis ex，ut porta dolor vestibulum ac。 Phasellus nunc tellus，viverra vestibulum posuere eu，faucibus vitae ex。 Aenean efficitur maximus nunc，在sagittis nunc mattis sed。 Vivamus etmagna vitae magna interdum sodales。 Ut imperdiet lobortis consectetur。< / p> < / DIV> < div class =sidebar>< / div> < / DIV> < div class =footer>< / div>< / body>
I need a strictly jQuery solution for this problem. This is because I'm using Wordpress and the sidebar widget that I want to make sticky is inside an <aside> element which I cannot make full height.
In the same way that .scrollTop() detects how far down the page I am to make the sidebar widget sticky I need JS detect how far up I am from the bottom of the page to "unstick" the widget via assigning a new fixed position.
I tried to to this with .offset() but I have been unable to make it work so far.
function stopDiv() {
var distance = $('.footer').offset().top - $('.widget').offset().top;
if (distance < 10) {
$('.widget').css({
'top': 'auto',
'bottom': '10px'
});
}
}
As you can see in the snippet below my sidebar scrolls as it should, but I want the sidebar to assume a new fixed position when I reach <10px distance from the footer.
I want the sidebar to assume a new fixed position above the footer until the user scrolls back up.
Edit: The solution suggested below by @Benvc works fine in the snippet, but not on my wordpress site. Here are the console errors I'm getting:
scripts.js:18 Uncaught ReferenceError: s is not defined
at HTMLDocument.<anonymous> (scripts.js:18)
at i (jquery.js:2)
at Object.fireWith [as resolveWith] (jquery.js:2)
at Function.ready (jquery.js:2)
at HTMLDocument.K (jquery.js:2)
at HTMLDocument.s (VM11874 rocket-loader.min.js:1)
at p (VM11874 rocket-loader.min.js:1)
at t.simulateStateAfterDeferScriptsActivation (VM11874 rocket-loader.min.js:1)
at Object.callback (VM11874 rocket-loader.min.js:1)
at t.run (VM11874 rocket-loader.min.js:1)
// Fixed Widget
function fixDiv() {
var $cache = $('.widget');
if ($(window).scrollTop() > 380)
$cache.css({
'position': 'fixed',
'top': '10px',
'right': '30px'
});
else
$cache.css({
'position': 'relative',
'top': 'auto',
'right': 'auto'
});
}
$(window).scroll(fixDiv);
fixDiv();
/* My attempt
function stopDiv() {
var distance = $('.footer').offset().top - $('.widget').offset().top;
if (distance < 10) {
$('.widget').css({
'top': 'auto',
'bottom': '10px'
});
}
}
$(window).scroll(stopDiv);
stopDiv();
*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
* {
font-family: 'Open Sans';
color: #fff;
box-sizing: content-box;
}
body {
padding: 0;
margin: 0;
}
p {
margin: 20px;
}
hr {
width: 85%;
border-style: solid;
}
.main-content {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 150px auto;
grid-template-areas: "nav nav nav nav" "main main main sidebar";
grid-column-gap: 20px;
grid-row-gap: 0px;
}
.nav {
grid-area: nav;
background-color: #266392;
display: grid;
grid-template-columns: 1fr 3fr 1fr;
}
.nav h1 {
place-self: center;
font-weight: 400;
font-size: 40px;
grid-column: 2;
}
.nav i {
align-self: center;
font-size: 40px;
}
.main {
height: 1500px;
width: 98%;
justify-self: start;
grid-area: main;
padding: 10px;
float: left;
background-color: #e8624c;
margin: 10px;
}
.sidebar-container {
height: 900px;
width: 300px;
justify-self: start;
background-color: #209B66;
grid-area: sidebar;
grid-column: 4;
top: 10px;
margin: 10px;
padding: 20px;
display: grid;
grid-template-rows: auto;
grid-row-gap: 10px;
}
.sidebar-container>p {
display: grid;
align-items: start;
padding: 0;
margin: 0;
}
.widget {
height: 500px;
width: 300px;
background-color: #E3962F;
}
.footer {
background-color: #333;
height: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="main-content">
<div class="nav">
<h1>Sticky Sidebar Problem</h1>
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</div>
<div class="main">
<p>
[Main Content]
</p>
</div>
<div class="sidebar-container">
<p>[Sidebar Container]</p>
<div class="widget">
<p> [Widget]</p>
</div>
</div>
</div>
<div class="footer"></div>
</body>
解决方案
EDIT - jquery solution (original css only answer below):
Based on your question edits that provide additional constraints and make an html / css only solution a bit more difficult, below is a jquery solution using your code with new jquery for the sticky sidebar widget and css to make the sidebar widget position: absolute and right: 30px (that value is arbitrary depending on where exactly you want the widget to sit inside the sidebar). Also, commented out a few other css lines that either weren't doing anything or interfered with the responsiveness of your grid layout (sticky sidebar functionality works with or without those changes, although you may need to adjust the right css of your widget element, including media queries, depending on where your layout ultimately ends up).
$(function() {
const sidebar = $('.sidebar-container');
const widget = $('.widget');
const footer = $('.footer');
const space = 10; // arbitrary value to create space between the window and widget
const startTop = sidebar.offset().top + 60; // arbitrary start top position
const endTop = footer.offset().top - widget.height() - space;
widget.css('top', startTop);
$(window).scroll(function() {
let windowTop = $(this).scrollTop();
let widgetTop = widget.offset().top;
let newTop = startTop;
if (widgetTop >= startTop && widgetTop <= endTop) {
if (windowTop > startTop - space && windowTop < endTop - space) {
newTop = windowTop + space;
} else if (windowTop > endTop - space) {
newTop = endTop;
}
widget.stop().animate({
'top': newTop
});
}
});
});
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
* {
font-family: 'Open Sans';
color: #fff;
box-sizing: content-box;
}
body {
padding: 0;
margin: 0;
}
p {
margin: 20px;
}
hr {
width: 85%;
border-style: solid;
}
.main-content {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 150px auto;
grid-template-areas: "nav nav nav nav" "main main main sidebar";
grid-column-gap: 20px;
grid-row-gap: 0px;
}
.nav {
grid-area: nav;
background-color: #266392;
display: grid;
grid-template-columns: 1fr 3fr 1fr;
}
.nav h1 {
place-self: center;
font-weight: 400;
font-size: 40px;
grid-column: 2;
}
.nav i {
align-self: center;
font-size: 40px;
}
.main {
height: 1500px;
/*width: 98%;
justify-self: start;*/
grid-area: main;
padding: 10px;
/*float: left;*/
background-color: #e8624c;
margin: 10px;
}
.sidebar-container {
height: 900px;
width: 300px;
justify-self: end;
background-color: #209B66;
grid-area: sidebar;
grid-column: 4;
/*top: 10px;*/
margin: 10px;
padding: 20px;
display: grid;
grid-template-rows: auto;
grid-row-gap: 10px;
}
.sidebar-container>p {
display: grid;
align-items: start;
padding: 0;
margin: 0;
}
.widget {
height: 500px;
width: 300px;
background-color: #E3962F;
position: absolute;
right: 30px;
}
.footer {
background-color: #333;
height: 800px;
}
<body>
<div class="main-content">
<div class="nav">
<h1>Sticky Sidebar Problem</h1>
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</div>
<div class="main">
<p>
[Main Content]
</p>
</div>
<div class="sidebar-container">
<p>[Sidebar Container]</p>
<div class="widget">
<p> [Widget]</p>
</div>
</div>
</div>
<div class="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
ORIGINAL - css solution:
Depending on what your requirements are for the footer and browser compatibility, you can get the effect you are looking for without any javascript / jquery. You would have to make a minor adjustment to your html, moving your footer outside the grid and styling it separately (I just added height for the example below). Then, you could just add position: sticky and top: 10px to your .sidebar css.
Result is that sidebar starts scrolling after the header is scrolled and then stops scrolling when it bumps into the footer.
Note that position: sticky is not supported in IE (there is a polyfill for sticky).
See the snippet below with example adjustments to your code:
body {
padding: 0;
margin: 0;
}
.main-content {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 80px auto 400px;
grid-template-areas: "nav nav nav nav" "main main main sidebar" "footer footer footer footer";
grid-column-gap: 20px;
grid-row-gap: 10px;
height: 100%;
}
.nav {
grid-area: nav;
background-color: #007ccc;
}
.main {
height: 100%;
max-width: 600px;
justify-self: start;
grid-area: main;
padding: 10px;
float: left;
}
.sidebar {
height: 600px;
width: 300px;
justify-self: start;
background-color: #4BA25E;
grid-area: sidebar;
grid-column: 4;
margin: 10px;
position: sticky;
top: 10px;
}
.footer {
background-color: #333;
height: 400px;
}
<body>
<div class="main-content">
<div class="nav"></div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt tempus nisi, vitae finibus nunc pharetra quis. Quisque in vehicula nunc. Nullam nec velit sed mi posuere ultricies pellentesque quis nibh. Morbi consequat, dui at consequat
rhoncus, neque nulla posuere odio, non dapibus velit urna in turpis. In feugiat massa orci, vitae scelerisque sem posuere ut.</p>
<p>Phasellus porttitor diam metus. Suspendisse quis mi sollicitudin, lobortis orci eu, pharetra ex. Cras ex nibh, dapibus quis tortor a, placerat commodo lorem. Mauris sed sapien ligula. Praesent lobortis cursus varius. Donec vulputate pulvinar interdum.
Suspendisse laoreet malesuada commodo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt tempus nisi, vitae finibus nunc pharetra quis. Quisque in vehicula nunc. Nullam nec velit sed mi posuere ultricies pellentesque quis nibh. Morbi consequat, dui at consequat
rhoncus, neque nulla posuere odio, non dapibus velit urna in turpis. In feugiat massa orci, vitae scelerisque sem posuere ut.</p>
<p>Phasellus porttitor diam metus. Suspendisse quis mi sollicitudin, lobortis orci eu, pharetra ex. Cras ex nibh, dapibus quis tortor a, placerat commodo lorem. Mauris sed sapien ligula. Praesent lobortis cursus varius. Donec vulputate pulvinar interdum.
Suspendisse laoreet malesuada commodo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt tempus nisi, vitae finibus nunc pharetra quis. Quisque in vehicula nunc. Nullam nec velit sed mi posuere ultricies pellentesque quis nibh. Morbi consequat, dui at consequat
rhoncus, neque nulla posuere odio, non dapibus velit urna in turpis. In feugiat massa orci, vitae scelerisque sem posuere ut.</p>
<p>Phasellus porttitor diam metus. Suspendisse quis mi sollicitudin, lobortis orci eu, pharetra ex. Cras ex nibh, dapibus quis tortor a, placerat commodo lorem. Mauris sed sapien ligula. Praesent lobortis cursus varius. Donec vulputate pulvinar interdum.
Suspendisse laoreet malesuada commodo.</p>
<p>In hac habitasse platea dictumst. Maecenas et mauris nunc. Aliquam erat volutpat. Duis eu condimentum ipsum. Etiam a mattis ipsum, sit amet vestibulum felis. In fermentum purus augue, vitae interdum ante gravida non. In tincidunt risus vitae ligula
dignissim pellentesque. Vivamus id est eget metus placerat euismod et nec diam. Integer luctus bibendum condimentum.</p>
<p>Vestibulum pretium quis mauris id pellentesque. Donec placerat iaculis ex, ut porta dolor vestibulum ac. Phasellus nunc tellus, viverra vestibulum posuere eu, faucibus vitae ex. Aenean efficitur maximus nunc, at sagittis nunc mattis sed. Vivamus
et magna vitae magna interdum sodales. Ut imperdiet lobortis consectetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt tempus nisi, vitae finibus nunc pharetra quis. Quisque in vehicula nunc. Nullam nec velit sed mi posuere ultricies pellentesque quis nibh. Morbi consequat, dui at consequat
rhoncus, neque nulla posuere odio, non dapibus velit urna in turpis. In feugiat massa orci, vitae scelerisque sem posuere ut.</p>
<p>Phasellus porttitor diam metus. Suspendisse quis mi sollicitudin, lobortis orci eu, pharetra ex. Cras ex nibh, dapibus quis tortor a, placerat commodo lorem. Mauris sed sapien ligula. Praesent lobortis cursus varius. Donec vulputate pulvinar interdum.
Suspendisse laoreet malesuada commodo.</p>
<p>In hac habitasse platea dictumst. Maecenas et mauris nunc. Aliquam erat volutpat. Duis eu condimentum ipsum. Etiam a mattis ipsum, sit amet vestibulum felis. In fermentum purus augue, vitae interdum ante gravida non. In tincidunt risus vitae ligula
dignissim pellentesque. Vivamus id est eget metus placerat euismod et nec diam. Integer luctus bibendum condimentum.</p>
<p>Vestibulum pretium quis mauris id pellentesque. Donec placerat iaculis ex, ut porta dolor vestibulum ac. Phasellus nunc tellus, viverra vestibulum posuere eu, faucibus vitae ex. Aenean efficitur maximus nunc, at sagittis nunc mattis sed. Vivamus
etmagna vitae magna interdum sodales. Ut imperdiet lobortis consectetur.</p>
<p>Vestibulum pretium quis mauris id pellentesque. Donec placerat iaculis ex, ut porta dolor vestibulum ac. Phasellus nunc tellus, viverra vestibulum posuere eu, faucibus vitae ex. Aenean efficitur maximus nunc, at sagittis nunc mattis sed. Vivamus
etmagna vitae magna interdum sodales. Ut imperdiet lobortis consectetur.</p>
<p>Vestibulum pretium quis mauris id pellentesque. Donec placerat iaculis ex, ut porta dolor vestibulum ac. Phasellus nunc tellus, viverra vestibulum posuere eu, faucibus vitae ex. Aenean efficitur maximus nunc, at sagittis nunc mattis sed. Vivamus
etmagna vitae magna interdum sodales. Ut imperdiet lobortis consectetur.</p>
</div>
<div class="sidebar"></div>
</div>
<div class="footer"></div>
</body>
这篇关于如何在使用jQuery在页眉和页脚之间滚动时使侧边栏变粘（不滚动它们）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
