移动滚动上的 BackStretch 空白底栏答案

【问题标题】：BackStretch blank bottom bar on mobile scroll移动滚动上的 BackStretch 空白底栏
【发布时间】：2014-07-18 03:49:47
【问题描述】：

所以我在我的网站上使用 BackStretch jQuery 插件，到目前为止它运行良好。我看到的唯一问题是，在移动垂直屏幕上，当我开始向下滚动时，底部会出现一个空白白条 - 就在顶部 url 和底部浏览器菜单缩小/消失之后。当顶部和底部浏览器栏消失时，body 标记中的背景似乎没有记录它需要调整大小。关于如何解决这个问题的任何想法？我正在使用 Boostrap 3.0，并且在垂直滚动条上出现了一些白条问题，但我能够使用 overflow-x:hidden 修复它。任何想法将不胜感激。该网站位于http://ivynursery.jacobbuller.com - 您可以在关于http://ivynursery.jacobbuller.com/about.php 和联系http://ivynursery.jacobbuller.com/contact.php 页面上查看问题。

这是我为 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 */
}
}

【问题讨论】：

你只是想获得一个完整的视口背景吗？
是的，基本上不需要使用 background-size:cover css 属性就可以得到一个完整的扩展背景，因为我想让它像 IE 8
也许这有助于不确定jsfiddle.net/DGu64

标签： twitter-bootstrap mobile scroll background-image jquery-backstretch

【解决方案1】：

我尝试在 JS 中为 BackStretch 框和图像添加高度，例如 120 像素（大多数导航栏小于 60 像素）。

...: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;
    }
}

但我遇到了下一个问题 - 更改屏幕旋转后，我得到冻结图像 bg。所以我需要一个 JS 函数。让我们在调整宽度时放置“冻结”类。但是当我们调整高度时 - 这意味着在移动设备上向下滚动时导航栏会跳动。

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');
 });

}

好吧...在移动设备上我们更改旋转背景，但向下滚动时不完美。但是mb有人可以使代码正确。谢谢

【讨论】：