Question: <http://jsfiddle.net/b6rkb/18/>

I want to have a fixed bar at the top of my page, that on hover shows a sub-bar. I want this sub-bar to push the rest of the page down when this happens.

CSS:

```
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
.page{
    height:5000px;
}
.fixed{
    position: fixed;
}

```

HTML:

```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").hover(function(){
    $("#panel").stop().slideToggle("slow");
  });
});
</script>

<body>

<div class="page">
        <div class="fixed">
            <div id="flip">Click to slide the panel down or up</div>
            <div id="panel">Hello world!</div>
        </div>
        <br><br><br>
        sup
</div>

```

Answer: 
Guessing you're using jQuery (document.ready and all). 

Attaching the event handler to the window after document.ready, and then triggering the event immediately fires the handler on document.ready and on every scroll event.

```
$(document).ready(function() {
    $(window).on('scroll', function() {
        // do stuff
    }).trigger('scroll');
});

```

or to reference a function

```
$(document).ready(function() {
    $(window).on('scroll', myJavascriptFunction).trigger('scroll');
});

function myJavascriptFunction() {
    // do stuff
}

```
call it like 

```
    $(document).ready(function(){
        $(window).scroll(function(){
           //some func
        });
        //same func
    })

```

also use it like this on [onscroll](http://api.jquery.com/scroll/) 

If u want it on [doc.ready](http://learn.jquery.com/using-jquery-core/document-ready/) too then write 2nd time too(though its not a good idea.)