页面加载时带有视差的奇怪位置

时间:2013-12-19 12:49:54

标签: javascript html css wordpress parallax

我正在使用视差来调整Wordpress主题,这是我为活动开发的徽标。

基本上我只是用新徽标的不透明层替换了原始元素,然后将它们重新定位到彼此叠加的层。问题是,在我完成此操作后,页面加载时徽标的放置或显示与滚动事件注册后不同。

我对视差或javascript的经验很少。该网站位于http://www.foodprint.se我在Chrome中遇到的控制台错误是:

  

body.scrollTop在严格模式下已弃用。请用   'documentElement.scrollTop'如果处于严格模式和'body.scrollTop'   只有在怪癖模式下。 jquery.js:不推荐使用4 body.scrollLeft   严格模式。如果是严格模式,请使用'documentElement.scrollLeft'   和'body.scrollLeft'仅在怪癖模式下。 jquery.js:4对象   {type:“refresh”,state:Object} state:对象类型:“refresh”    proto :对象script.js:192不推荐使用event.returnValue。请改用标准的event.preventDefault()。的jquery.js:3   对象{type:“refresh”,state:Object} state:对象类型:“refresh”    proto :对象

如果有任何提示可以让我朝着正确的方向前进,我将不胜感激。

1 个答案:

答案 0 :(得分:0)

您遇到的问题是chrome的常见问题.....它使用body.scrollTop来表示标准模式下视口的滚动位置。

我能想到的可能原因是chrome的制造商希望开发人员转向更正式或更普遍的编码方式......对于像Mozilla这样的其他浏览器,我不认为你的问题会在那里(你在其他浏览器中检查过!!在我的mozilla上看起来很好:))

如果有问题,你可以查看 this Git 以获得修复!!!

此外,如果可以使用jquery see this link ,则显示相当于body.scrollTop

修改

在您的文件 layout.css

您已为margin: 700px 0 0 0;设置#header .....这会导致页面仅在滚动后呈现放置...将700px更改为0px

现在,要在放弃后放置内容,请将同一文件中的#header .content部分修改为以下内容:

#header .content {
    margin: 700px 0 20px 0; /* previously it was 0 0 20px 0 */
    line-height: 18px;
    z-index: 4;
}