Question

我想要一个div出现，并在滚动标题后向下滑动。

这是它应该是什么样子：

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

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

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。

Answer 2

你可能想要显示和隐藏你的div而不是伪类并隐藏和显示

最初： $（ “＃mydiv”）隐藏（）。然后（滚动）： $（ “＃mydiv”）显示（）;

设置你想要div的样子，即0,0和固定

使用Keep It Simple方法！

Answer 3

我已经用你可以尝试的东西更新了你的jsfiddle。

试试这个：
http://jsfiddle.net/nHnrd/10/

另外，这篇文章很有帮助：
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

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

3 个答案: