hide/show on scroll

by DJS Baker

HTML

<div>
    <div class="a">
        A
    </div>
    <div class="b">
        B
    </div>
</div>

CSS

body {
    height: 2000px;    
}
.a {
    height: 300px;
    width: 300px;
    background-color: green;
}
.b {
    height: 300px;
    width: 300px;
    background-color: red;
}

JavaScript

function showDiv() {
        if ($(window).scrollTop() > 610 && $('.a').data('positioned') == 'false') {
            $(".a").hide().css({"position": "fixed", "top": "10px"}).fadeIn().data('positioned', 'true');
        } else if ($(window).scrollTop() <= 610 && $('.a').data('positioned') == 'true') {
            $(".a").fadeOut(function() {
                $(this).css({"position": "relative", "top": "0px"}).show();
            }).data('positioned', 'false');
        }
    }
$(window).scroll(showDiv);
$('.a').data('positioned', 'false');