Jumping div on scroll

Question

I have a problem with my page:

http://dennisadelmann.de/New/index.html

when my index page is loading, the Name (header) is jumping. i think its because of the simpleweather plugin. but i couldnt find a solution

Here are the code of my header: (let me know if you need more of the code)

    <div id="fadeMenu">
        <ul class="navscroll">
            <li><a href="contact.html">work</a></li>
            <li><a href="#">journal</a></li>
            <li><a href="#">contact</a></li>
        </ul>

    </div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="top"></div>
    <div id="bottom"></div>

    <header>        

    <nav>
            <a href="index.html">work</a>
            <a href="index2.html">journal</a>
            <a href="index3.html">contact</a>
  </nav>


            <div id="weather"></div>
            <div id="name">
            <h1>DENNIS ADELMANN</h1>
            <p>communication design</p>
                </div>
    </header>

Thank you!!!!

Answer 1

You're right, it seems like it's because of the weather plugin.

To fix it you need to either make height:fixed where the weather appears (so changing the content doesn't matter)

OR

You could add some default content to the area when it's made that is later changed once the plugin is ran, something like a fallback inside the element tags: "The weather plugin is blocked. Please allow third party plugins on your browser."