javascript - 使div出现在wordpress的滚动条上

标签 javascript jquery html css wordpress

我似乎无法弄清楚这一点。我敢肯定这很简单。我的目标是在用户向下滚动一点后,使实心填充的 div 从视口(viewport)顶部向下滑动。我之前在一个基本页面中实现过这个,但我似乎无法让它在 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 的问题。将脚本放在页脚中时我运气不好。有任何想法吗?谢谢!

最佳答案

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

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

    });
});
</script>

关于javascript - 使div出现在wordpress的滚动条上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25210719/

相关文章:

javascript - 跨浏览器addevent函数javascript

javascript - 如何在 Jest 自定义匹配器中打印漂亮的对象差异?

jquery - 基于 Accordion 可见性的切换类

html - 将 textarea 中的文本垂直对齐到普通文本

javascript - 从 ajax 和 jquery 调用获取合法数组

Javascript通过单击同一个按钮一个一个地切换多个div

javascript - Highcharts 导出 : Unable to export rendered arc colors

javascript - 触发事件

html - 在 Windows 中安装 OTRS 3.2

html - 如何使固定宽度的表格适合手机浏览器的整个宽度?