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:

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.