个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
26
4
标题可能有点困惑，我会尽力解释我需要实现的目标。基本上我有一个特定网页的以下元素:
正如我上面提到的，页面的内容部分可能是最棘手的部分。我需要一个大图像作为背景，覆盖整个区域。 css-tricks 有一个 excellent guide in the ways to do full page background images .所以我希望这可以很容易地实现。问题是如果窗口小于 720 像素且其下方的页脚低于折叠(需要您滚动到它)，如何使子页脚保持在底部。大于 720 像素的窗口应同时显示子页脚和没有滚动条的页脚。
此时我什至不会担心内容需要的最小高度(可能需要内容上的滚动条 <div> 或使子页脚 和 页脚低于折叠)。
这是我想要实现的图像模型:
首先 - 一个 <720px 高的窗口，页脚需要滚动到该窗口: 
第二个 - 一个 <720px 高的窗口，向下滚动可以看到页脚: 
最后 - 一个 >720px 的高窗口，没有滚动条，因为一切都是可见的: 
我正在使用 jQuery，不关心 IE6。我可以在 CSS 中实现吗？我必须使用 jQuery 来动态调整吗？整页背景很容易用 css3 完成，我很乐意使用 css3 或 html5 来做我需要的。
最佳答案
你绝对不能使用 CSS position: fixed，因为它总是相对于视口(viewport)，而不是父元素。
您需要做的是将“subfooter”作为“content”的固定定位子元素。为此，您将不得不使用 Javascript。
像这样的东西应该可以满足您的需要。尝试更改 #content 的 CSS 中的高度变量，这样您就可以看到它在不同内容高度下的表现:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<style>
#header {
height: 50px;
background-color: #ccc;
width: 100%;
margin-bottom: 10px;
}
#content {
position: relative;
height: 1500px;
width: 100%;
background-color: #ccc;
}
#subfooter {
height: 50px;
width: 100%;
background-color: #666;
position: fixed;
}
#footer {
height: 50px;
width: 100%;
margin-top: 10px;
background-color: #ccc;
}
</style>
<script>
$(document).ready(function(){
$(document).scroll(function() {
position_subfooter();
});
var position_subfooter = function() {
$("#subfooter").css("bottom", "20px");
if(($("#subfooter").offset().top - $("#subfooter").height()) > ($("#content").scrollTop() + $("#content").height())) {
$("#subfooter").css("bottom", ($("#subfooter").offset().top - ($("#content").scrollTop() + $("#content").height()) + 20));
}
}
position_subfooter();
});
</script>
</head>
<body>
<div id="header">
<h1>HEADER</h1>
</div>
<div id="content">
</div>
<div id="subfooter">
<h2>SUB FOOTER</h1>
</div>
<div id="footer">
<h1>FOOTER</h1>
</div>
</body>
</html>
关于jquery - 覆盖浏览器窗口的背景图像减去折叠下方的页眉和页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4792641/
26
4
0
我是一名优秀的程序员,十分优秀！