javascript - 向下滚动时如何使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。