Css 将div底部锚定到屏幕底部（而不是页面）
当用户滚动时，如何将div的底部锚定到屏幕的底部？例如，如果您在网站上有一个左侧导航，并且该导航延伸到用户屏幕下方约200像素处，则用户将看不到所有导航 当该用户开始滚动时，导航通常会正常滚动。如果页面足够长，用户可以滚动浏览所有导航。我的目标是保持左侧导航可见，并固定在屏幕底部，无论用户滚动多远 职位：固定；无法单独解决此问题，因为用户需要能够滚动到导航的底部，因为它比大多数标准显示器的分辨率都高。查看本教程 这里有一个单独的文件显示了上述教程中的实现。只要稍加调整，你就能达到你想要的Css 将div底部锚定到屏幕底部（而不是页面）,css,scroll,Css,Scroll,当用户滚动时，如何将div的底部锚定到屏幕的底部？例如，如果您在网站上有一个左侧导航，并且该导航延伸到用户屏幕下方约200像素处，则用户将看不到所有导航 当该用户开始滚动时，导航通常会正常滚动。如果页面足够长，用户可以滚动浏览所有导航。我的目标是保持左侧导航可见，并固定在屏幕底部，无论用户滚动多远 职位：固定；无法单独解决此问题，因为用户需要能够滚动到导航的底部，因为它比大多数标准显示器的分辨率都高。查看本教程 这里有一个单独的文件显示了上述教程中的实现。只要稍加调整，你就能达到你想要的 &l
<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>
$（函数（）{
变量msie6=$.browser='msie'&&$.browser.version<7；
如果（！msie6）{
var top=$（'#box'）.offset（）.top；
$（窗口）。滚动（功能（事件）{
var y=$（this.scrollTop（）；
如果（y>=top）{$（'#box'）.addClass（'fixed'）；}
else{$（'#box'）.removeClass（'fixed'）；}
});
}
});
$（函数（）{
//检查浏览器是否为IE6
变量msie6=$.browser='msie'&&$.browser.version<7；
//仅在使用浏览器时运行以下代码
//不是IE6。在IE6上，盒子总是
//滚动。
如果（！msie6）{
//设置“top”变量。如下所示
//代码计算的初始位置
//盒子。
var top=$（'#box'）.offset（）.top；
//接下来，我们使用jQuery的滚动函数
//在滚动浏览时监视页面。
$（窗口）。滚动（功能（事件）{
//在下一行中，我们将“y”设置为
//是滚动的像素数
//从顶部开始。
var y=$（this.scrollTop（）；
//你有没有翻过页面
//盒子？如果是，我们需要设置盒子
//修复。
如果（y>=顶部）{
//将框设置为“固定”类。
$（'#box'）.addClass（'fixed'）；
}否则{
//删除“固定”类
$（“#box”）.removeClass（'fixed'）；
}
});
}
});
梅因先生
{
左边距：自动；
右边距：自动；
高度：2000px；
宽度：800px；
背景颜色：浅蓝色；
}
#盒子{
背景颜色：绿色；
位置：绝对位置；
顶部：50px；
左：50%；
宽度：200px；
左边距：-500px；
高度：500px；
}
#固定的{
位置：固定；
}
你好，世界
这是主页，这是可滚动的内容。