如何在向下滚动时从顶部显示div？

Question

div滚动传递标题后,我希望显示并向下滑动.

这是它应该是什么样子:

http://www.space.com/11425-photos-supernovas-star-explosions.html

这是我到目前为止所得到的,但它不起作用.

http://jsfiddle.net/nHnrd/

Answer 1

您需要找到标题的高度及其在页面上的位置,然后根据使用jquery的scrollTop值显示或隐藏div.

例如:

// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();

$(window).scroll(function(){
    checkY();
});

function checkY(){
    if( $(window).scrollTop() > startY ){
        $('.fixedDiv').slideDown();
    }else{
        $('.fixedDiv').slideUp();
    }
}

// Do this on load just in case the user starts half way down the page
checkY();

然后你只需要将.fixedDiv设置为position:fixed:top:0; 左:0;

编辑:我添加了一个checkY()函数,您可以在页面加载和滚动时调用它.最初要隐藏它,只需使用CSS.