让 div 出现在 wordpress 的滚动条上答案

【问题标题】：Make div appear on scroll in wordpress让 div 出现在 wordpress 的滚动条上
【发布时间】：2014-10-02 08:37:55
【问题描述】：

我似乎无法弄清楚这一点.. 我敢肯定这很简单。我的目标是一旦用户向下滚动一点，就使实心填充的 div 从视口顶部向下滑动。我之前在一个基本页面中实现了这个，但我似乎无法让它在 wordpress 中工作。这是我正在使用的代码：

<script type="text/javascript">  

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 50) {
        $('.slide').slideDown();
    } else {
        $('.slide').slideUp();
    }

});

</script>

div位于顶部，css为：

.slide {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, 0.97);
    z-index: 1;
}

当我删除 display: none 时，它会显示，所以我知道这不是 z-index 的问题。将脚本放在页脚时我没有运气。有任何想法吗？谢谢！

【问题讨论】：

您还有其他具有更高 z-index 的元素吗？如果是这样，例如尝试将 z-index 设置为 100。
不，就像我说的，在当前的 z-index 为 1 时，当我删除 'display: none' 时，div 会出现在我想要的位置。我不认为这是我的 html 或 css 的问题。我想我只是把脚本放在错误的地方或错误地调用它。我是 wordpress 开发的新手，所以非常令人沮丧！

标签： javascript jquery html css wordpress

【解决方案1】：

有了这么多信息，我猜这是因为 WordPress 使用 noconflict 造成的。
尝试像这样修改您的代码：

<script type="text/javascript"> 
jQuery(function($) {
    $(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 50) {
            $('.slide').slideDown();
        } else {
            $('.slide').slideUp();
        }

    });
});
</script>

【讨论】：

您好，感谢您的意见！我应该把它放在 wordpress 哪里？
您可以查看codex.wordpress.org/Function_Reference/wp_enqueue_script。请务必注意 $deps 部分，应将其设置为 array('jquery') 以确保在脚本运行之前包含 jQuery。

【解决方案2】：

放在 header.php 上

<script type="text/javascript" >

jQuery(document).scroll(function() {
    if ( jQuery(this).scrollTop() > 300) {
        jQuery('.home-link').fadeOut(1500);
        jQuery('.nav-menu a').css({ "font-weight": "bold"});
    } else {
        jQuery('.home-link').fadeIn();
        jQuery('.nav-menu a').css({ "font-weight": ""});
    }
});

</script>

beetwen <?php wp_head(); ?> 和 </head>

【讨论】：