如何修复视差 window 滚动溢出?
How to fix parallax window scroll overflow?
我在页面顶部的图片上使用 parallax.js v1.3。
请帮我找出为什么当我向下滚动时图片溢出。
当我加载页面时,图片略微变形,好像放大太多了。
当我向下滚动时,图片溢出了面包屑。
js文件在下面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
我认为这可能与 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;});
});
这是我向下滚动之前浏览器上的样子:
这是我向下滚动后浏览器中的样子:
我通过将 CSS 更改为 header#plain{position:fixed;background-color:#fff;padding-bottom:0;}
解决了这个问题
问题在于位置固定为静态。
我在页面顶部的图片上使用 parallax.js v1.3。 请帮我找出为什么当我向下滚动时图片溢出。
当我加载页面时,图片略微变形,好像放大太多了。
当我向下滚动时,图片溢出了面包屑。
js文件在下面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
我认为这可能与 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;});
});
这是我向下滚动之前浏览器上的样子:
这是我向下滚动后浏览器中的样子:
我通过将 CSS 更改为 header#plain{position:fixed;background-color:#fff;padding-bottom:0;}
解决了这个问题
问题在于位置固定为静态。