当前位置：文江博客话题详情

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

发布于 2024-12-11 18:51:57 字数 325 浏览 0 评论 0原文

我希望在滚动通过标题后出现一个 div 并向下滑动。

它应该是这样的：

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

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

http://jsfiddle.net/nHnrd/

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独享拥抱 2024-12-18 18:51:57

您需要找出标题的高度及其在页面上的位置，然后使用 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 即可。

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();

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

Edit: 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.

回复收藏 0 原文