如何修复视差窗口滚动溢出?

时间:2015-05-16 18:18:23

标签: jquery css parallax parallax.js

我正在页面头部的图片上使用parallax.js v1.3。 请帮我找出为什么当我向下滚动图片溢出。

当我加载页面时,图片稍微扭曲,好像它被放大了太多。

当我向下滚动图片溢出面包屑时。

js文件位于以下链接:http://www.wanderintown.com/js/functions.js我用$('.parallax-window').parallax({}); /* Parallax modal*/调用脚本,调用http://www.wanderintown.com/js/parallax.js处的js paralax

我认为这可能与正确加载JS有关。因为我正在使用Yii框架,并且我将脚本包含在我的主文件中。对于任何信息,请告诉我

CSS是:

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

页面上的JS是:

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

在我向下滚动之前,这就是我的浏览器的样子: enter image description here

这是我向下滚动后浏览器的样子:

enter image description here

1 个答案:

答案 0 :(得分:3)

我通过将CSS更改为header#plain{position:fixed;background-color:#fff;padding-bottom:0;}来解决了这个问题 问题在于将位置固定为静态。

相关问题