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: enter image description here

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

enter image description here

This has probably to do something with your positioning of the breadcrumb element. do you have a link to your site? — brance
– brance, Commented May 16, 2015 at 18:21
i dont see any js errors , iam using google inspect element. Can you suggest me better tool to diagnose the error? — Gunnit
– Gunnit, Commented May 16, 2015 at 18:29
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. — brance
– brance, Commented May 16, 2015 at 18:29
Can you create a fiddle of this by any chance. Try moving your breadcrumb into the same div as your header. — Tech Savant
– Tech Savant, Commented May 16, 2015 at 18:59

Gunnit · Accepted Answer · 2015-05-19 12:12:37Z

3

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.

answered May 19, 2015 at 12:12

Gunnit

1,0745 gold badges22 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to fix parallax window scroll overflow?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related