向下滚动时显示 Nav Div答案

【问题标题】：Making Nav Div Appear When Scrolling Down向下滚动时显示 Nav Div
【发布时间】：2012-12-28 12:28:56
【问题描述】：

当用户向下滚动传递一个名为 .header1 的 div 类时，我希望一个 div 出现在顶部（这个 div 里面还有 3 个其他 div）

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

<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 总是在那里。向下滚动时不会隐藏或显示。

This 是我网站的链接。

对于 css，我没有为 .header1 设置任何内容，因为其他 div 在里面，它们应该是 .fixedDiv 出现所需的高度。而.fixedDiv 有 css

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

我知道我即将完成这项工作，但我似乎无法弄清楚我错过了什么。

【问题讨论】：

标签： jquery html css scroll

【解决方案1】：

为什么不在滚动时使用带有 setInterval 的 fadeIn 和 fadeOut？类似的东西......

.scroll( function()
{
    if($(".fixedDiv").css('display', 'none'))
    {
        $(".fixedDiv").fadeIn("normal", function()
        {
            setInterval( function() { $(".fixedDiv").fadeOut("normal"); }, 1500 );
        });
    }
}

【讨论】：

据我了解，如果您的 wordpress 处于非冲突模式，那么您可以使用 jQuery(selector) 而不是 $(selector)。

【解决方案2】：

测试$(".header1").position() 得到TypeError: undefined is not a function。

由于 WordPress，您似乎在 noConflict mode。

试试这个：

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

编辑：你有一个额外的<script> 标签（至少，Chrome 能看到它）。它似乎在 Firefox 中运行良好。

【讨论】：

有没有办法改变wordpress模式？
@PhilippeAllaire 您的网站上缺少.top。（它是startY=jQuery(".header1").position().top + ...）您还需要将该行下方的所有其他$s 更改为jQuery。
@PhilippeAllaire 您似乎在代码上方多了一个<script> 标签。
@PhilippeAllaire 不应该有额外的</script>，而应该是额外的<script type="text/javascript">。并且应该加载 jQuery...
@PhilippeAllaire 正上方 var startY= jQuery(".header1").position().top + ... - 查看更新的答案

【解决方案3】：

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

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 行）是做什么的，但缺少的是什么... 谢谢你

【讨论】：