Weird placement on page load with parallax

3 Views

I’m working on adjusting a WordPress theme using parallax to a logo I’ve developed for an event.

Basically I’ve just replaced the original elements with opaque layers of the new logo and have then repositioned them to layer directly on top of each other. The problem is that after I’ve done this, the placement or the display of the logo is different on page load than it is after a scrolling event is registered.

Read More

I have very little experience with parallax or javascript. The site is at http://www.foodprint.se The console errors I’m getting in chrome are:

body.scrollTop is deprecated in strict mode. Please use
‘documentElement.scrollTop’ if in strict mode and ‘body.scrollTop’
only if in quirks mode. jquery.js:4 body.scrollLeft is deprecated in
strict mode. Please use ‘documentElement.scrollLeft’ if in strict mode
and ‘body.scrollLeft’ only if in quirks mode. jquery.js:4 Object
{type: “refresh”, state: Object} state: Object type: “refresh”
proto: Object script.js:192 event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.js:3
Object {type: “refresh”, state: Object} state: Object type: “refresh”
proto: Object

I would appreciate any tips which could send me in the right direction.

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. The problem you are facing is general one for chrome…..it uses body.scrollTop to represent the view-port’s scroll position in standards mode.

    Possible reason i can think of is that the makers of chrome want the developers to switch to more formal or universal style of coding….as for other browsers like Mozilla, I don’t think your problem would be there (have you checked in other browsers too !!? looks fine on my mozilla 🙂 )

    You can check out this Git for a fix if it helps!!!

    Also, if its okay to use jquery, see this link , it shows the equivalent of body.scrollTop

    EDIT

    In your file layout.css

    you have set margin: 700px 0 0 0; for #header…..this is causing the page to render the drop only after scroll…change the 700px to 0px

    Now, to place the content after drop, ammend #header .content section in same file to below :

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