How to make a div fade in after a specific height?

I am trying to make a fixed div appear after the user scrolls 100px down on a page, and disappears again when the scroll past that 100px to the top.

I would like to use a opacity fade transition of 0.5s when the div appears to make a nice transition.

Have been trying to do this but can only seem to get it to appear as soon as the user scrolls using this code:

Would love to hear from someone who 开发者_JAVA技巧has the solution.

Thanks! :)

Here is a start http://jsfiddle.net/ZtGK6/

$(window).scroll(function(){
      if($(window).scrollTop()>100){
         $("#theDiv").fadeIn();
      }else{
         $("#theDiv").fadeOut();
      }

});

A good way to make it hide on page load is to give the surrounding div CSS class a display: none; property. That way it will display hidden when the page initially loads, and not fade out quickly upon page load. Then, your JavaScript will load it after you scroll down the determined # of pixels. This will behave cleanly and is super easy to achieve.

HTML:

<div id="theDiv">Now I'm visible</div>

CSS:

body, html {
    height: 200%;
}

#theDiv{
    top: 30px;
    left: 20px;
    display: none;
    background-color:#FFF000;
    width:200px;
    height:200px;
}

Javascript:

$(window).scroll(function(){
      if($(window).scrollTop()>100){
         $("#theDiv").fadeIn();
      }else{
         $("#theDiv").fadeOut();
      }

});

Demo: http://jsfiddle.net/waitinforatrain/ZtGK6/3/

$(function() {

    var theDiv = $('#myDiv'),
        scrollPos = $('body').scrollTop();

    if ( scrollPos > 100 ) {

        theDiv.fadeIn(500); // 500 milliseconds

    } else {

        theDiv.fadeOut(500);

    }

});

I haven't been able to test this and you may have to put the if statement in a scroll event so the scrollPos var updates as you scroll.