向下滚动时如何让div出现在顶部？

问题描述：

我想要一个 div 出现，并且在您滚动传递标题时向下滑动。

I would like a div to appear and slide down once you scroll pass the header.

它应该是这样的：

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

以下是目前为止的内容，但无法使用。

Here's what I got so far but it's not working.

http://jsfiddle.net/nHnrd/

答

您需要找出页眉的高度及其在页面上的位置，然后根据scrollTop值显示或隐藏div使用jquery。

You'll need to find out the height of the header and its position on the page then just show or hide the div depending on the scrollTop value using jquery.

例如：

For example:

// 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; left：0;

Then you'll just need to set the .fixedDiv to position:fixed: top: 0; left: 0;

编辑：我添加了一个checkY（）函数，您可以在页面加载和滚动时调用。要尽可能隐藏它，只需使用CSS。

I've added a checkY() function that you can call whenever the page loads as well as on scroll. To hide it initially though, just use CSS.

向下滚动时如何让div出现在顶部？

相关推荐