向下滚动时使Nav Div出现 [英] Making Nav Div Appear When Scrolling Down

问题描述

当用户向下滚动时，我希望div出现在顶部，并传递一个名为.header1的div类(该div内部还有3个div)

I want a div to appear at the top when user scroll down pass a div class called .header1 (This div has 3 other div inside)

我希望导航出现在该.fixedDiv中.我在 此处找到了答案 ，但是我无法在我的网站上实施它. 这就是我得到的

I want the nav to appear in that .fixedDiv. I found my answer here, but I have not been able to implement it on my site. Here is what I got

<script type="text/javascript">
    var startY = $('.header1').position().top + $('.header1').outerHeight();
    $(window).scroll(function () {
        if( $(this).scrollTop() > startY ){
            $('.fixedDiv').slideDown();
        }else{
            $('.fixedDiv').slideUp();
        }
    });
</script>

我的网站上有一个名为.fixedDiv的div，上面显示topnav，我的问题是div始终存在.向下滚动时不会隐藏或显示.

And I have a div called .fixedDiv on my site saying topnav, my problem is the div is always there. It doesn't hide or appear when scrolling down.

这是指向我的网站的链接.

This is a link to my website.

对于CSS，我没有为.header1进行任何设置，因为其他div位于其中，并且它们应该是.fixedDiv出现所需的高度.并且.fixedDiv具有CSS

For css I have nothing setup for .header1 because other div are inside and they should be the height needed for .fixedDiv to appear. And .fixedDiv has css

.fixedDiv {
    position:fixed;
    top:0px;
    left:0px;
    background:orange;
}

我知道我已经接近完成这项工作，但是我似乎无法弄清我所缺少的内容.

I know I'm close to getting this working but I just can't seem to figure out what I'm missing.

推荐答案

所以终于弄明白了，我喜欢它，它看起来很棒

So finally got it figured out, and I love it, it looks great

jQuery(document).ready(function() {
var startY= jQuery('.header1').position().top + jQuery('.header1').outerHeight();
jQuery('.fixedDiv').html( jQuery('#nav').html());
jQuery(window).scroll(function () {
    if(jQuery(this).scrollTop() > startY ){
        jQuery('.fixedDiv').slideDown();
    }else{
        jQuery('.fixedDiv').slideUp();
    }
});
});

不知道多余的行(第3行)做什么，但是缺少的是... 谢谢

Not sure what the extra line (line 3) does but that what was missing ... Thank You

这篇关于向下滚动时使Nav Div出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！