1

So I am using BackStretch jQuery plugin for my website and so far it's working great. The only problem I see is that on mobile vertical screens a blank white bar appears on the bottom when I start scrolling down - right after the top url and bottom browser menus shrink/disappear. It looks like the background in the body tag doesn't register that it needs to resize when the top and bottom browser bars disappear. Any idea on how to fix this? I'm using Boostrap 3.0 and was having some issues with a white bar on the vertical scroll bar but I was able to fix that with overflow-x:hidden. Any ideas would be greatly appreciated. The website is located at http://ivynursery.jacobbuller.com - you can see the problem on the About http://ivynursery.jacobbuller.com/about.php and Contact http://ivynursery.jacobbuller.com/contact.php pages.

Here's the css I have for the body and container divs:

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 */
}
}
Jacob Buller
  • 137
  • 4
  • 24

1 Answers1

0

I've try add height for example 120px (mostly navbar less than 60px) for BackStretch box and image in JS. 

...:this.$root.height():this.$root.innerHeight(),g=g+120,...

but of course when you scroll down you will get other inner box height, navbar disappear after scroll down and window become higher, than i freeze box changes in 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;
    }
}

But i get next problem - after changes screen rotation i get freeze image bg. So I need one more JS func. Lets put 'freeze' class just when we have width resize. But when we have height resize - it's mean on mobile that navbar jump when scroll down.

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

}

Ok then... when on mobile we change rotation bg chages but when scroll down not - perfect. But mb somebody can make code proper. Thx

Oleg V Karun
  • 726
  • 1
  • 6
  • 29