Anchor bottom of div to bottom of screen (not the page)
How can I anchor the bottom of a div to the bottom of the screen when a user scrolls? For example if you have a left navigation on a website, and this navigation extends about 200 pixels below the users's screen they will not see all of the navigation.
When this user 开发者_JAVA百科starts to scroll, normally the navigation scrolls as normal. If the page is long enough the user can scroll by all of the navigation. My goal is to keep the left nav visible, and anchored to the bottom of the screen no matter how far the user scrolls.
postion:fixed; will not solve this issue alone since the user needs to be able to scroll to the bottom of the navigation, since it is taller than most standard monitor resolutions.
Check this tutorial
http://www.webgeekly.com/tutorials/jquery/a-simple-guide-to-making-a-div-static-as-you-scroll-past-it/
here is a single file showing implementation from this above tutorial. With little bit tweaking you could achieve what you want.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#box').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) { $('#box').addClass('fixed'); }
else { $('#box').removeClass('fixed'); }
});
}
});
$(function () {
// Check whether browser is IE6
var msie6 = $.browser == 'msie' && $.browser.version < 7;
// Only run the following code if browser
// is not IE6. On IE6, the box will always
// scroll.
if (!msie6) {
// Set the 'top' variable. The following
// code calculates the initial position of
// the box.
var top = $('#box').offset().top;
// Next, we use jQuery's scroll function
// to monitor the page as we scroll through.
$(window).scroll(function (event) {
// In the following line, we set 'y' to
// be the amount of pixels scrolled
// from the top.
var y = $(this).scrollTop();
// Have you scrolled beyond the
// box? If so, we need to set the box
// to fixed.
if (y >= top) {
// Set the box to the 'fixed' class.
$('#box').addClass('fixed');
} else {
// Remove the 'fixed' class
$('#box').removeClass('fixed');
}
});
}
});
</script>
<style type="text/css">
.main
{
margin-left:auto;
margin-right:auto;
height:2000px;
width:800px;
background-color:lightblue;
}
#box {
background-color:green;
position: absolute;
top: 50px;
left: 50%;
width: 200px;
margin-left: -500px;
height:500px;
}
#box.fixed {
position: fixed;
}
</style>
</head>
<body>
<div id="box">
<p>Hello World</p>
</div>
<div class="main">
This is main page and here is scrollable content.
</div>
</body>
</html>
加载中,请稍侯......
精彩评论