这是StackOverFlow上的一个常见问题，但是我在这里找到的答案不能完全解决我的问题。要了解我的问题，请浏览我发现的fiddle的here。我的问题是，由于我的html结构如下所示，因此我无法应用此解决方案：
我的HTML部分：
<div id="cms-menu" data-pagename="FAQS">
Header html
</div>
<section class="help-centre xs-pt-20 xs-pb-20">
<div class="container-fluid left-container-padding right-container-padding">
<div class="row">
<div class="col-xs-12 text-left">
<h2>Help Centre</h2>
<p>Search or browse our frequently asked questions below</p>
</div>
</div>
</div>
</section>
<section class="back-to-help-centre sm-pt-20 sm-pb-20 xs-pt-10 xs-pb-10">
<div class="container-fluid left-container-padding right-container-padding">
<div class="row">
<div class="col-xs-12 text-left cursor-hand">
<a href="/helpcentre">
<span class="glyphicon glyphicon-arrow-left"></span>
<h5>Back to Help Centre</h5>
</a>
</div>
</div>
</div>
</section>
<section class="myfaq">
<div class="container-fluid">
<div class="row nav-categories-row same-height-columns">
<div class="col-sm-3 left-container-padding white-col-background hidden-xs">
<div class="faq-categories">
<h3>Sidebar header</h3>
<nav id="nav-categories-scroll">
<ul class="nav nav-pills nav-stacked nav-categories fixed">
<li class="faq-item"><a href="#sectionA">sectionA link</a></li>
<li class="faq-item"><a href="#sectionB">sectionB link</a></li>
<li class="faq-item"><a href="#sectionC">sectionC link</a></li>
<li class="faq-item"><a href="#sectionD">sectionD link</a></li>
<li class="faq-item"><a href="#sectionE">sectionE link</a></li>
<li class="faq-item"><a href="#sectionF">sectionF link</a></li>
<li class="faq-item"><a href="#sectionG">sectionG link</a></li>
<li class="faq-item active"><a href="#sectionH">sectionH link</a></li>
<li class="faq-item"><a href="#sectionI">sectionI link</a></li>
</ul>
</nav>
</div>
</div>
<div class="col-sm-9 right-container-padding grey-col-background col-xs-12 faq">
<div id="sectionA">content</div>
<div id="sectionB">content</div>
<div id="sectionC">content</div>
<div id="sectionD">content</div>
<div id="sectionE">content</div>
<div id="sectionF">content</div>
<div id="sectionG">content</div>
<div id="sectionH">content</div>
<div id="sectionI">content</div>
<div class="faq-disclaimer">
<span class="disclaimer-title">Disclaimer:</span><span class="disclaimer-text">disclaimer-text</span>
</div>
</div>
</div>
</div>
</section>
$(document).scroll(function (e) {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
var div_height = $(".nav-categories").height();
var startScrollPos = $("#nav-categories-scroll").offset().top;
var currentScroll = $(this).scrollTop();
var padding = 20; // tweak here or get from margins etc
var scrollTopThreshold = 348;
if (window_top + div_height > footer_top - padding) {
if (currentScroll <= scrollTopThreshold) {
$(".nav-categories").css({ top: -10 });
} else {
$(".nav-categories").css({ top: (window_top + div_height - footer_top + padding) * -1 });
}
} else if (window_top > div_top) {
$(".nav-categories").addClass('fixed');
} else {
$(".nav-categories").css({ top: 0 });
$(".nav-categories").removeClass('fixed');
}
});
</div>
<footer class="md-pt-30 md-pb-30" id="footer">
<div class="container hidden-xs">
<div class="row">
<div class="col-sm-3 col-xs-12">
<h4>INFORMATION</h4>
<ul class="list-unstyled">
<li><a href="/contact-us">Contact Us</a></li>
<li><a href="/terms-of-use" target="_blank">Terms of Use</a></li>
<li><a href="/privacy-policy" target="_blank">Privacy Policy</a></li>
<li><a href="/faq">FAQs</a></li>
<li><a href="/login">Login</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<hr>
<div class="legal">All Rights Reserved.</div>
</div>
</div>
</div>
</footer>
</div>
当页面滚动到达页脚（与上面的链接中的fiddle相匹配）时，我的粘性侧边栏消失了。到达页脚时，如何使其随页面向上滚动？这是使用Umbraco的现有解决方案，因此我无法更改页面html的结构，而且我也不是CSS专家，可以自己解决这个问题。下面是CSS：
当侧边栏可见且发粘时
.mycssclass .nav-categories.fixed {
position: fixed;
top: 0;
}
.mycssclass .nav-categories {
margin-top: 20px;
width: 100%;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
ol, ul {
margin-top: 0;
margin-bottom: 10px;
}
在滚动条到达页面页脚后隐藏侧边栏
.mycssclass .nav-categories {
margin-top: 20px;
position: relative;
width: 100%;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
ol, ul {
margin-top: 0;
margin-bottom: 10px;
}
注意：内容部分（A到I）是动态生成的，将来可能会增加。
解决方案
在div下方的<nav id="nav-categories-scroll">下方
然后按如下所示更新了javascript代码
$(document).scroll(function (e) {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
var div_height = $(".nav-categories").height();
var startScrollPos = $("#nav-categories-scroll").offset().top;
var currentScroll = $(this).scrollTop();
var padding = 20; // tweak here or get from margins etc
var scrollTopThreshold = 348;
if (window_top + div_height > footer_top - padding) {
if (currentScroll <= scrollTopThreshold) {
$(".nav-categories").css({ top: -10 });
} else {
$(".nav-categories").css({ top: (window_top + div_height - footer_top + padding) * -1 });
}
} else if (window_top > div_top) {
$(".nav-categories").addClass('fixed');
} else {
$(".nav-categories").css({ top: 0 });
$(".nav-categories").removeClass('fixed');
}
});
答案 0 :(得分：2)
这是我的解决方案：将#sticky设置为absolute到页脚
function sticky_relocate() {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
var div_height = $("#sticky").height();
if (window_top + div_height > footer_top) {
$('#sticky').removeClass('stick');
$('#sticky').addClass('absolute');
}
else if (window_top > div_top) {
$('#sticky').removeClass('absolute');
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
$('#sticky').removeClass('absolute');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});#sticky {
padding: 0.5ex;
width: 200px;
height:300px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
float:left;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10;
border-radius: 0 0 0.5em 0.5em;
}
.content-holder {
margin-left:225px;
}
.absolute {
position: absolute;
bottom: 600px;
}
body {
margin: 1em;
position: relative
}
p {
margin: 1em auto;
}
#footer {
width:100%;
height:600px;
background:#ccc;
z-index:999999
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Made for my post: <a href="http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html">Stick div at top after scrolling</a>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque,
lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh
lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus.
Maecenas lacinia bibendum accumsan. Curabitur lobortis convallis purus
non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat.
Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan
ullamcorper lorem id porttitor. Aliquam vitae libero eget magna mollis
gravida.</p>
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<div class="content-holder">
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
</div>
<div id="footer">
Footer here.
</div>