Fixing white space at the bottom

[erwanx]

Hi, cool plugin.

I've implemented it on a bootstrap install with different scrolling speeds for the elements using

data-stellar-ratio="" and data-stellar-vertical-offset=""

However, as the elements are scrolling faster than their natural speed, I am left with white, empty space at the bottom, unless I specify a height for the container with overflow:hidden. I can't really well do that, since this is a responsive website and I would have to specify the height for many viewport sizes.

Is there a way to clip the extra space left at the bottom by faster scrolling elements? Thanks.

[caseydev]

Yes, facing same issue here too

[csaggo]

same here, seems to do the top: wrong :(

[giacomoalonzi]

Same problem here!
$.stellar({ verticalOffset: 0, horizontalScrolling: false, positionProperty: 'mixedPhotos', hideDistantElements: false, responsive: true, horizontalOffset: 0, })

[brentmiller1973]

I sort have solved it by adjusting some background properties using media queries:
.photo-scroll {
background-attachment: fixed;
background-position: 50% 0;
background-size: cover;
background-repeat: no-repeat;
height: auto;
position: relative;
}

@media (max-width: 1024px) {
    .photo-scroll {
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: auto;
        height: auto;
        position: relative;
    }
}

The only issue is if the user adjusts the browser width from > 1024 to < 1024 or vice versa, a page refresh is needed to render properly. I wish there was a way for stellar to be refreshed on a programmatic breakpoint....

[phzhou76]

Weirdly enough, adding a linear gradient on top of the image seemed to have solved the issue for me, like such:

background: linear-gradient( rgba(20, 20, 20, 0), rgba(20, 20, 20, .1)), url(../img/index-header.jpg) center center scroll;