html中固定header和footer及vegas插件修改背景
2017-08-15 本文已影响222人
18587a1108f1
开发中发现首页上下滑动会暴露背景图（我使用了vegas插件，全屏背景），需要将header和footer定死在最上下方，使得滑动不显示后方的背景图。
学习后总结解决方案如下：
一般header、footer固定(无全屏背景图)：
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>title</title>
<style>
#page{margin:0 auto;width:960px;}
#header{width:960px; height:60px; position:absolute; top:0;background-color:#ccc;}
#footer{width:960px; height:30px; position:absolute; bottom:0; background-color:#ccc;}
#content{width:960px; overflow: auto; position:absolute; top:60px; bottom:30px;}
#logo, #nav{height:60px;float:left;}
</style>
</head>
<body>
<div id="page">
<div id="header">
<div id="logo">header logo</div>
</div>
<div id="content">
main content
“这里可以添加很长的内容，可用于测试是否能够正常滚动”
测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
浏览器中运行效果图：
效果图
可以正常实现header和footer固定，只滚动中间的内容。
vegas全屏插件调整背景图大小
vegas简介（如果已了解vegas可直接阅读下一部分）
vegas插件为一款网页全屏背景jQuery插件，它和其它背景插件不同之处就是带有幻灯片功能。幻灯片的切换有多种风格，如旋转、渐隐、左右等方式，切换的时候还有进度条显示。
使用方法：
1.VEGAS的CSS、JS以及jQuery插件嵌入到<head>内。
<head>
<link rel="stylesheet" href="http://jaysalvat.github.io/vegas/releases/latest/vegas.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://jaysalvat.github.io/vegas/releases/latest/vegas.js"></script>
</head>
- 通过js添加背景图片：
$(function () {
$.vegas('slideshow', {
backgrounds: [
{ src: 'assets/img/1.jpg', fade: 1000, delay: 9000 },
{ src: 'assets/img/2.jpg', fade: 1000, delay: 9000 },
{ src: 'assets/img/3.jpg', fade: 1000, delay: 9000 },
{ src: 'assets/img/4.jpg', fade: 1000, delay: 9000 },
]
})('overlay', {
/** SLIDESHOW OVERLAY IMAGE **/
src: 'templates.assets/plugins/vegas/overlays/03.png' // THERE ARE TOTAL 01 TO 15 .png IMAGES AT THE PATH GIVEN, WHICH YOU CAN USE HERE
});
});
vegas中全屏背景图与header、footer位置调节
在使用vegas时候发现一个问题，就是如果使劲上滑界面，header和footer下方的背景会暴露出来，即使强制fixed了header和footer也没有用，设置background-size属性也没有用。这应该是vegas插件的全屏背景的原因。
问题示意图
通过html调试，我发现vegas加载的图片通用class为 .vegas-background ，其加载的全屏背景图的大小会动态调节，因而我强制修改了背景图的动态全屏调节，让其大小正常显示在页面中。
强制修改的css如下：
<style>
.vegas-background {
top: 0px!important;
bottom: 0px!important;
width: 100%!important; //这里可以调整你想要的背景图size大小，建议100%
height: 100% !important; //这里可以调整你想要的背景图size大小，建议100%
}
</style>
修改完之后还需要在header和footer中添加fixed参数，使得滑动时位置固定。
<style>
.header {
top: 0px;
position:fixed;
}
.footer{
bottom: 0px;
position:fixed;
}
</style>
修改完效果图
上图可以看到，强制上滑时footer下方的背景图不在了，会变为正常的留白效果。
tips:现在浏览器都支持用户体验较好的滑动效果，即滑动到最上、最下方时候都可以继续强制滑动一截，如果使用header、footer以及背景图的话请一定处理好，不要出现错位的显示效果。
