如何修复视差窗口滚动溢出？答案

【问题标题】：How to fix parallax window scroll overflow?如何修复视差窗口滚动溢出？
【发布时间】：2015-05-19 20:12:37
【问题描述】：

我在页面顶部的图片上使用 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 视差

我认为这可能与正确加载 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;});
});

这是我向下滚动之前在浏览器上的样子：

这是我向下滚动后在浏览器上的样子：

【问题讨论】：

这可能与您对面包屑元素的定位有关。您有指向您网站的链接吗？
是的，你去wanderintown.com/index.php/tours/10
我没有看到任何 js 错误，我正在使用 google 检查元素。你能推荐我更好的工具来诊断错误吗？
是的，因为您的标题进入固定位置，在您向下滚动之后，然后计算高度的视差实际上是在实例化时使用标题高度。当您向下滚动时，标题进入固定位置，视差“松动”它的高度。这就是为什么你会得到差距。我现在正在研究如何轻松解决它。
你能不能创造一个这样的小提琴。尝试将面包屑移动到与标题相同的 div 中。

标签： jquery css parallax parallax.js

【解决方案1】：

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

【讨论】：