2015-05-16 10 views
9

Używam parallax.js v1.3 na obrazku w nagłówku mojej strony. Proszę, pomóż mi dowiedzieć się, dlaczego, kiedy przewijam obraz w dół.Jak naprawić przepełnienie okna paralaksy?

Po załadowaniu strony obraz jest lekko zniekształcony, jakby został zbyt mocno powiększony.

Kiedy przewijam w dół obraz nad tartą bułką.

js plik jest pod poniższym linkiem: http://www.wanderintown.com/js/functions.js gdzie wywołać skrypt $('.parallax-window').parallax({}); /* Parallax modal*/ że wywołuje js Paralax na http://www.wanderintown.com/js/parallax.js

myślę, że może to mieć coś wspólnego z prawidłowym załadunku JS. Ponieważ używam frameworka Yii i dołączam skrypty do mojego głównego pliku. Dla każdej informacji plz daj mi znać

CSS jest:

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

JS na stronie:

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

To jak to wygląda w mojej przeglądarce, zanim przewiń: enter image description here

to, co wygląda na przeglądarce po przewijać w dół:

enter image description here

+0

To prawdopodobnie ma związek z pozycjonowaniem elementu nawigacyjnego. masz link do swojej witryny? – brance

+0

yhea tutaj idziesz http://www.wanderintown.com/index.php/tours/10 – Gunnit

+0

Nie widzę żadnych błędów js, używając elementu google inspect. Czy możesz zaproponować mi lepsze narzędzie do zdiagnozowania błędu? – Gunnit

Odpowiedz

3

I rozwiązać problem poprzez zmianę CSS header#plain{position:fixed;background-color:#fff;padding-bottom:0;} Problem był z pozycji, która jest przymocowana do statyczne.