html中固定header和footer及vegas插件修改背景大小

开发中发现首页上下滑动会暴露背景图（我使用了vegas插件，全屏背景），需要将header和footer定死在最上下方，使得滑动不显示后方的背景图。
学习后总结解决方案如下：

一般header、footer固定(无全屏背景图)：

    
    
    




    

        
header logo
    
    

          main content
          “这里可以添加很长的内容，可用于测试是否能够正常滚动”
          测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度+测试内容长度
    
    

          footer
    

浏览器中运行效果图：

效果图

可以正常实现header和footer固定，只滚动中间的内容。

vegas全屏插件调整背景图大小

vegas简介（如果已了解vegas可直接阅读下一部分）

vegas插件为一款网页全屏背景jQuery插件，它和其它背景插件不同之处就是带有幻灯片功能。幻灯片的切换有多种风格，如旋转、渐隐、左右等方式，切换的时候还有进度条显示。
使用方法：
1.VEGAS的CSS、JS以及jQuery插件嵌入到内。

2. 通过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如下：

修改完之后还需要在header和footer中添加fixed参数，使得滑动时位置固定。

修改完效果图

上图可以看到，强制上滑时footer下方的背景图不在了，会变为正常的留白效果。

tips:现在浏览器都支持用户体验较好的滑动效果，即滑动到最上、最下方时候都可以继续强制滑动一截，如果使用header、footer以及背景图的话请一定处理好，不要出现错位的显示效果。