Question

我似乎无法想出这个......我确信这很简单。我的目标是在用户向下滚动一点后，从视口顶部向下滑动一个实心填充的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的问题。将脚本放在页脚中时我没有运气。有任何想法吗？谢谢！

Answer 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>

Answer 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>

更多解释（西班牙语）：

Como ocultar la cabecera de pagina WordPress al hacer Scroll + Video

在divpress中滚动显示div

2 个答案: