现在我知道，如果用户滚动到侧栏的底部，那么侧边栏会变为固定并保留在用户页面上，同时他们会阅读剩余的主要内容。但现在我的固定div正在进入页脚。那么，我怎样才能阻止它从父DIV中掉出来并进入页脚？
这里有一个小问题：http://jsfiddle.net/95W8w/
这是我的HTML＆amp;使用Javascript：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blob.net</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<!-- INCLUDE THOSE JAVASCRIPTS AT THE BOTTOM FOR SPEED-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="js/jquery.sticky-scroll.min.js"></script>
<!-- STOP INCLUDING THOSE JAVASCRIPT FILES-->
<script>
$(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
$sidebar = $('#anchor'),
$sidebarAnchor = $('#right');
// Run this on scroll events.
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $sidebarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$sidebar.addClass('stick');
$sidebarAnchor.height($sidebar.height());
}
else {
// Unstick the div.
$sidebar.removeClass('stick');
$sidebarAnchor.height(0);
}
});
});
</script>
</head>
<body>
<!-- MAIN CONTAINER -->
<div id="container">
<!-- HEADER -->
<div id="header">
<div id="header_text">
<h1>This is a fancy header</h1>
</div>
</div>
<!-- END HEADER -->
<!-- MAIN CONTENT -->
<div id="left">
<div id="left_inside">
<p>+1 literally bespoke seitan fashion axe retro semiotics. Neutra forage sartorial, XOXO Shoreditch cornhole Blue Bottle. Pork belly Wes Anderson bicycle rights sriracha single-origin coffee narwhal. Shoreditch kogi Helvetica narwhal authentic Terry Richardson. American Apparel pug banh mi salvia DIY, scenester shabby chic selfies Brooklyn. 8-bit iPhone vinyl, authentic pug post-ironic occupy craft beer bitters pork belly mustache brunch. Sustainable next level ethnic gastropub Bushwick beard tote bag hashtag, ethical semiotics master cleanse.</p><p>Chia you probably haven't heard of them fingerstache gluten-free PBR&B. YOLO Pinterest pork belly, slow-carb Marfa paleo sustainable. Butcher asymmetrical salvia bespoke, small batch single-origin coffee slow-carb locavore photo booth. Lo-fi VHS salvia 3 wolf moon swag banjo. Ethical salvia iPhone, pop-up you probably haven't heard of them kogi keytar butcher bitters 90's. Letterpress chillwave skateboard polaroid, retro fixie sriracha Pinterest Marfa before they sold out jean shorts ennui. Paleo mlkshk lo-fi, XOXO before they sold out fixie squid four loko retro.</p><p>XOXO tattooed pork belly meh. Mumblecore fashion axe wolf, synth Shoreditch Thundercats chillwave you probably haven't heard of them meggings Echo Park narwhal. Organic polaroid Williamsburg Marfa master cleanse. Neutra seitan chillwave, distillery gluten-free authentic ennui literally irony twee food truck Brooklyn. Tousled iPhone yr, mustache hella VHS 3 wolf moon 8-bit. Gentrify Marfa Banksy, organic kitsch pug High Life direct trade lomo cornhole butcher pour-over PBR viral bitters. Sustainable actually drinking vinegar synth, freegan fingerstache banjo PBR direct trade Cosby sweater.</p><p>Truffaut Marfa locavore Carles. Ethical tattooed fanny pack mumblecore, deep v mixtape synth. Gastropub 8-bit keytar cliche banh mi. Flexitarian tousled scenester disrupt, Pitchfork before they sold out mlkshk tattooed. Vegan twee mlkshk synth polaroid Terry Richardson post-ironic, blog Intelligentsia master cleanse salvia mumblecore stumptown Godard. Authentic tote bag 3 wolf moon twee, yr swag kale chips semiotics +1 four loko. Cray Cosby sweater farm-to-table, seitan literally dreamcatcher fixie Williamsburg kogi roof party umami +1.</p><p>Master cleanse salvia fap, sartorial Helvetica banh mi Marfa literally Bushwick. Mixtape PBR pickled Portland yr, drinking vinegar sustainable next level tote bag. Next level scenester PBR&B, squid cornhole Thundercats flannel +1 small batch cliche paleo semiotics hoodie. Whatever iPhone 8-bit, XOXO Marfa cardigan tote bag bicycle rights typewriter Shoreditch swag Intelligentsia chillwave wolf forage. Semiotics salvia cardigan you probably haven't heard of them butcher Marfa Carles. Street art Pinterest biodiesel flexitarian, photo booth 3 wolf moon art party Vice Echo Park kale chips pug. Lo-fi yr plaid Shoreditch, fixie mustache squid.</p><p>Shabby chic locavore fanny pack forage brunch vinyl pork belly. Bespoke Thundercats fixie pour-over, polaroid distillery aesthetic master cleanse. Pug brunch pickled keytar Tumblr, trust fund tofu cornhole Helvetica kitsch fixie try-hard farm-to-table authentic. YOLO Pitchfork deep v bespoke mumblecore cardigan. Banh mi pickled aesthetic, Tonx lomo selfies Carles semiotics Bushwick. Distillery leggings tattooed pork belly, stumptown Etsy selfies trust fund biodiesel hoodie narwhal four loko salvia. Gluten-free 3 wolf moon cliche, drinking vinegar Brooklyn plaid Portland.</p><p>Sartorial Brooklyn biodiesel, quinoa pug locavore fashion axe PBR&B before they sold out hoodie. Chia Terry Richardson bicycle rights, readymade fingerstache dreamcatcher Cosby sweater 90's occupy Odd Future pork belly. Roof party gentrify viral cred art party, direct trade butcher single-origin coffee tousled sriracha. Leggings Etsy deep v, squid dreamcatcher iPhone twee Helvetica Pinterest Portland hoodie Brooklyn street art Carles. Chia food truck roof party leggings next level, fashion axe Austin sustainable four loko. Tattooed chambray Tumblr, keffiyeh craft beer try-hard Williamsburg letterpress Terry Richardson ethnic umami. Blog church-key before they sold out biodiesel, craft beer Truffaut disrupt direct trade yr vinyl salvia.</p><p>Locavore next level Tumblr Austin dreamcatcher ethnic Vice, hashtag you probably haven't heard of them Bushwick Portland 8-bit organic narwhal XOXO. VHS asymmetrical keytar small batch, Brooklyn cray tattooed swag cardigan authentic distillery bespoke Terry Richardson pork belly. PBR YOLO wayfarers plaid food truck hella narwhal deep v, lo-fi meggings selvage fap Carles photo booth direct trade. Fap Wes Anderson dreamcatcher Carles. Jean shorts aesthetic Williamsburg hoodie pickled freegan, banjo fap Banksy Shoreditch fashion axe occupy flannel meh retro. 3 wolf moon Odd Future ennui, tousled meggings Carles PBR. Chambray photo booth semiotics Terry Richardson street art, meh Echo Park whatever drinking vinegar.</p><p>Farm-to-table single-origin coffee scenester, sustainable polaroid fingerstache distillery retro messenger bag. Pug sartorial twee, viral American Apparel Echo Park meggings lomo. American Apparel Cosby sweater Thundercats sriracha locavore selfies, artisan roof party cred hashtag single-origin coffee. Mixtape quinoa butcher, PBR&B trust fund 90's American Apparel sriracha semiotics cred pour-over Thundercats 3 wolf moon. Freegan asymmetrical tattooed trust fund next level try-hard. Put a bird on it blog bicycle rights hoodie hella street art, swag dreamcatcher twee pop-up. Freegan biodiesel pour-over post-ironic tote bag, hashtag gluten-free banjo fanny pack.</p><p>Food truck Blue Bottle hella post-ironic, messenger bag vegan mumblecore Etsy meh trust fund semiotics literally Truffaut Intelligentsia ethical. Ethnic Bushwick butcher tofu, tattooed tote bag ethical Williamsburg shabby chic literally church-key pour-over keffiyeh Vice. Cray PBR&B pop-up Blue Bottle fashion axe, master cleanse single-origin coffee selvage. Lomo Truffaut four loko, kogi chambray Etsy ethnic seitan skateboard Shoreditch hella occupy. 90's pork belly Truffaut wayfarers, cray banh mi salvia yr craft beer Brooklyn swag tattooed pour-over pug Blue Bottle. Typewriter stumptown literally selvage semiotics, keytar sartorial beard asymmetrical selfies. Leggings bespoke narwhal Williamsburg American Apparel stumptown viral, paleo umami freegan swag.</p><p>Helvetica kitsch 3 wolf moon Odd Future organic, food truck Terry Richardson fixie shabby chic small batch four loko hoodie YOLO forage. XOXO hoodie organic, Bushwick banh mi cray Tonx scenester deep v typewriter ennui bitters fanny pack art party butcher. Swag semiotics aesthetic tofu try-hard. Hoodie food truck flannel church-key, next level try-hard +1 aesthetic wayfarers chia actually keffiyeh Neutra tattooed. Kogi bitters cred Pinterest. Pitchfork four loko banh mi lomo drinking vinegar art party, iPhone roof party raw denim Echo Park kogi 90's asymmetrical. Authentic ethnic bitters, cardigan polaroid stumptown DIY PBR&B Brooklyn ennui street art.</p><p>Food truck chia 3 wolf moon fingerstache umami. Messenger bag kitsch art party, Banksy Williamsburg cornhole forage Godard retro Cosby sweater cray jean shorts Neutra. Lo-fi mlkshk gastropub, fanny pack tattooed Banksy before they sold out PBR. Deep v tote bag mumblecore, art party semiotics Thundercats twee 90's cred Etsy you probably haven't heard of them. Polaroid food truck banh mi, cliche YOLO DIY vegan ugh. Craft beer freegan vegan, chambray bespoke mlkshk typewriter hella lo-fi dreamcatcher Thundercats shabby chic mumblecore. Banh mi XOXO Echo Park locavore, Tonx Terry Richardson pork belly keffiyeh tote bag fashion axe iPhone.</p><p>Banjo umami direct trade irony, pork belly squid cornhole 8-bit shabby chic Etsy. DIY Vice tousled kale chips High Life. Lomo PBR polaroid Tonx, whatever Marfa VHS chia street art. Paleo cred you probably haven't heard of them, messenger bag Helvetica disrupt +1. Church-key bicycle rights locavore, cardigan chillwave messenger bag ethical. Gluten-free roof party kogi fingerstache fixie freegan. Post-ironic ennui disrupt distillery.</p><p>Pickled Brooklyn chia, chillwave fanny pack wayfarers tofu asymmetrical. Street art mlkshk flannel, single-origin coffee PBR&B semiotics pork belly High Life butcher PBR chambray kogi freegan farm-to-table. Wes Anderson vinyl sartorial ethnic ethical, 8-bit cornhole umami hella fap asymmetrical. Neutra hoodie messenger bag PBR&B. Art party next level small batch letterpress, iPhone hoodie dreamcatcher mlkshk whatever pickled pop-up. Pour-over biodiesel High Life, cray cred Blue Bottle Pitchfork YOLO. Chia dreamcatcher lo-fi Schlitz, gentrify scenester tofu Brooklyn.</p>
</div>
</div>
<!-- END MAIN CONTENT -->
<!-- SIDEBAR -->
<div id="right">
<div id="anchor">
<div class="elements row1">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Photos</a></li>
</ul>
</div>
<div class="elements row2">
</div>
<div class="elements row3">
</div>
<div class="elements row4">
</div>
<div class="elements row5">
</div>
</div>
</div>
<!-- END SIDEBAR -->
<div class="clear"></div>
</div><!-- END MAIN CONTAINER -->
</body>
</html>
这是我的CSS：
#container {
background-color:#CCC;
margin-top: 100px;
margin-right: auto;
margin-bottom: 100px;
margin-left: auto;
width: 1200px;
height: auto;
box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
-moz-box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
-webkit-box-shadow: 0px 0px 10px 2px rgba(119, 119, 119, 0.75);
}
/* HEADER CSS */
#header {
width: 100%;
height: 75px;
background-color: #FC6;
padding-top: 2px;
padding-bottom: 10px;
}
#header_text h1{
font-family: "Arial Black", Gadget, sans-serif;
margin-left: 32%;
}
/* CONTENT CSS */
#left {
width: 800px;
height: auto;
background-color: #CF9;
float: left;
}
#left_inside {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 30px;
}
#left p {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
/* SIDEBAR CSS */
#right {
width: 400px;
height: auto;
background-color:#6CF;
float: right;
}
.elements {
border: 1px solid #000;
height: auto;
width: 400px;
min-height: 180px;
}
/* NAV BAR STYLES */
#right ul {
list-style-type: none;
margin-left: 25%;
}
#right ul li{
margin-top: 30px;
}
#right ul li a:link{
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000;
}
#right ul li a:hover{
color: #CCC;
}
/* ROWS */
.row1 {
background-color:#930;
}
.row2 {
background-color: #633;
}
.row3 {
background-color: #C66;
}
.row4 {
background-color: #96F;
}
.row5 {
background-color: #FF0;
}
/* END SIDEBAR CSS */
.clear {
clear: both;
}
/* MAKE SIDE BAR STICKY*/
.stick {
position: fixed;
bottom: 0;
}
答案 0 :(得分：2)
以下是您可以根据需要调整代码的演示 http://jsfiddle.net/Mdrpg/1/
我声明并分配了一个我在条件中使用过的变量（如果是第二个），这样当我们再次向顶部滚动时，侧边栏的css变化使其再次滚动，不会再次发生一次。
var set=0;
scroll事件的回调函数中看到的变量是在我们修复侧边栏或使其再次滚动时使用侧边栏属性top的值。它会使侧边栏变为当我们更改其position类型时，它会保留在窗口中。
var currPos = document.getElementById('a').getBoundingClientRect();
在第一个if条件中，在预览时，{> 1}}会根据top offset of the area as per its position in the document检查窗口已滚动多少的值，侧边栏将停止滚动(orange area in the demo)。如果符合第一条件set，则会为其分配值1
在第二个if条件中，语句在第一if条件中为真的标准被反转，并加上另一个标准set==1，如上所述，标准将导致只有一次执行使侧栏再次滚动的过程，因为我们会在此处0重新分配set。
修改 对于在Web开发人员的敌人（IE＆lt; 10）:)中工作的给定解决方案，将上面的内容放在文档中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">