How to fix parallax window scroll overflow?

Question

i am using parallax.js v1.3 on the picture in the head of my page. Please help me find out why when i scroll down the picture overflows.

When i load the page the picture is slightly distorted as if it was enlarged too much.

When i scroll down the picture overflows over the bread crumbs.

The js file is at the following link:http://www.wanderintown.com/js/functions.js where i call the script with $('.parallax-window').parallax({}); /* Parallax modal*/ that calls the js paralax at http://www.wanderintown.com/js/parallax.js

I think it could be something to do with the correct loading of the JS. Since i am using a Yii framework and i am including the scripts in my main file. For any info plz let me know

The CSS is:

e.parallax-window {
min-height: 470px;
background: transparent;
position:relative;

The JS on the page is :

    jQuery(function($) {
jQuery('[data-toggle=popover]').popover();
jQuery('[data-toggle=tooltip]').tooltip();
jQuery('#yw0 .alert').alert();
jQuery('#rating90 > input').rating({'readOnly':true});
jQuery('#rating40 > input').rating({'readOnly':true});
jQuery('#rating5 > input').rating({'readOnly':true});
jQuery('#rating6 > input').rating({'readOnly':true});
jQuery('#yw1').yiiListView({'ajaxUpdate':['yw1'],'ajaxVar':'ajax','pagerClass':'pagination','loadingClass':'list-view-loading','sorterClass':'sorter','enableHistory':false,'afterAjaxUpdate':function() {
            jQuery('.popover').remove();
            jQuery('[data-toggle=popover]').popover();
            jQuery('.tooltip').remove();
            jQuery('[data-toggle=tooltip]').tooltip();
        }});

            $( document ).ready(function( $ ) {
                            $( '#Img_carousel' ).sliderPro({
                                    width: 960,
                                    height: 500,
                                    fade: true,
                                    arrows: true,
                                    buttons: false,
                                    fullScreen: false,
                                    smallSize: 500,
                                    startSlide: 0,
                                    mediumSize: 1000,
                                    largeSize: 3000,
                                    thumbnailArrows: true,
                                    autoplay: false
                            });
                    });
jQuery('body').on('change','#lang',function(){jQuery.yii.submitForm(this,'',{});return false;});
});

This is what it looks like on my browser before i scroll down:

This is what it looks like on my browser after i scroll down:

Carve

This has probably to do something with your positioning of the breadcrumb element. do you have a link to your site? – Slippy

yhea here you go wanderintown.com/index.php/tours/10 – Carve

i dont see any js errors , iam using google inspect element. Can you suggest me better tool to diagnose the error? – Carve

Yeah it happens because your header goes into position fixed, after you scroll down, and then your parallax that is calculating the height, is actually using the header height at the instantiation. And when you scroll down, the header goes into position fixed, and the parallax "looses" it's height. That is why you get the gap. I'm looking now how you could easily solve it. – Slippy

Can you create a fiddle of this by any chance. Try moving your breadcrumb into the same div as your header. – Wildebeest

iam using a php yii site i dont think can create it on fiddle since everything is loaded separately – Carve

Answer 1

I solved the issue by changing the CSS to header#plain{position:fixed;background-color:#fff;padding-bottom:0;} The problem was with the position being fixed to static.

Carve