Twitter bootstrap 移动滚动条上的反向拉伸空白底部栏

Twitter bootstrap 移动滚动条上的反向拉伸空白底部栏,twitter-bootstrap,mobile,scroll,background-image,jquery-backstretch,Twitter Bootstrap,Mobile,Scroll,Background Image,Jquery Backstretch,所以我在我的网站上使用BackstretchjQuery插件,到目前为止,它工作得很好。我看到的唯一问题是,在移动垂直屏幕上,当我开始向下滚动时,底部会出现一个空白的白色条,就在顶部url和底部浏览器菜单收缩/消失之后。当顶部和底部浏览器栏消失时,body标记中的背景似乎没有注册它需要调整大小。你知道怎么解决这个问题吗?我正在使用Boostrap 3.0,垂直滚动条上的白色条出现了一些问题,但我能够用overflow-x:hidden修复这些问题。任何想法都将不胜感激。该网站位于-您可以在关于和

所以我在我的网站上使用BackstretchjQuery插件,到目前为止,它工作得很好。我看到的唯一问题是,在移动垂直屏幕上,当我开始向下滚动时,底部会出现一个空白的白色条,就在顶部url和底部浏览器菜单收缩/消失之后。当顶部和底部浏览器栏消失时,body标记中的背景似乎没有注册它需要调整大小。你知道怎么解决这个问题吗?我正在使用Boostrap 3.0,垂直滚动条上的白色条出现了一些问题,但我能够用overflow-x:hidden修复这些问题。任何想法都将不胜感激。该网站位于-您可以在关于和联系页面上看到问题

以下是我为body和container div提供的css:

html,
body {
height: 100%;
position: relative;
}
body {
overflow-x: hidden;
/* Removes right space for browser scrollbar on mobile */
}
.container {
 margin-right: 15px;
 /* Adjust content to make up for hidden x-overflow 15px on mobile */
 }
 @media (min-width: 768px) {
 .container {
margin-right: auto;
/* Adjust content to middle for non-mobile */
}
}

我已经尝试为JS中的BackStretch框和图像添加高度,例如120px(大多数导航条小于60px)

...:this.$root.height():this.$root.innerHeight(),g=g+120,...
但当然,当你们向下滚动时,你们会得到其他内部框的高度,向下滚动后导航栏消失,窗口变得更高,比我在css/less中冻结框的变化要高

    .backstretch.freeze{
&,img{
        -webkit-transition: height 5000s ease-out, width 5000s ease-out, left 5000s ease-out, top 5000s ease-out;
        -o-transition: height 5000s ease-out, width 5000s ease-out left 5000s ease-out, top 5000s ease-out;
        transition: height 5000s ease-out, width 5000s ease-out left 5000s ease-out, top 5000s ease-out;
    }
}
 //hide empty space after navbar hide 
.backstretch{
    img{
        top:-60px;
    }
}
但我得到了下一个问题-改变屏幕旋转后,我得到冻结图像背景。所以我还需要一个JS func。让我们在调整宽度大小时放置“冻结”类。但当我们有高度调整-这意味着在手机上导航栏跳时,滚动下来

var isMobile = false; //initiate as false
isMobile = window.matchMedia("only screen and (max-width: 767px)");
if (isMobile.matches) {


    $.backstretch("Images/bg1-mobil-min.jpg");
    var boxwidth = $('.backstretch').width();

    $(window).resize(function() {
       if (boxwidth != $('body').width() ) { 
         $('.backstretch').removeClass('freeze');
         boxwidth = $('.backstretch').width();
       } else {
         $('.backstretch').addClass('freeze');
         boxwidth = $('.backstretch').width();
       }            
    });

// keep freeze when scroll 
$(document).scroll(function() {
    $('.backstretch').addClass('freeze');
 });

}

好吧,那么。。。当在手机上,我们改变旋转背景改变,但当向下滚动不完美。但是,有人可以使代码正确。Thx

你只是想得到一个完整的视口背景吗?是的,基本上是得到一个完整的扩展背景,而不使用背景大小:cover css属性,因为我想让它尽可能的安全。也许这有助于不确定