Question

很抱歉，如果这是一个菜鸟问题。我对JQuery相对较新，并且操纵DOM。

我想要实现的是当用户向下滑动页面大约10％时，标题中的徽标会消失。我在网上找到了一些非常有用的教程，但事实证明它们没有成功。

徽标：

<div id="logo" style="padding-bottom: 30px;">
    <a href="index.php">
        <img src="http://localhost/website/logo.png">
    </a>
</div>

JQuery：

<script>
    $("body").scroll( function() {
        var value = $(this).scrollTop();
        if ( value > 100 )
            $("#logo").css("display", "none");        
    });
</script>

非常感谢任何编辑，推荐或教育资源

Answer 1

使用window，而不是body

$(window).on('scroll', function() {
    var value = $(this).scrollTop();
    if ( value < 100 )
        $("#logo").css("display", "none");        
});

向上滚动时再次切换徽标

$(window).on('scroll', function() {
    $("#logo").toggle($(this).scrollTop() < 100);
});

FIDDLE

使用JQuery让徽标消失

1 个答案: