Question

我有一个想要在滚动事件中更改的徽标图像，我有这个代码，但我没有发生任何事情，我做错了什么？

这是PHP / HTML：

<a class="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" data-fixed-height="<?php echo esc_attr( et_get_option( 'fixed_nav_logo_height', '51' ) ); ?>">
  <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" />
</a>

这是jQuery：

<script>

    ( document ).ready(function() {
    ('.ie #main-header #logo').attr('src','my_logo_image_url');

    (window).scroll( function () {
    ('body:not(.ie) #main-header #logo').not('.et-fixed-header').attr('src','my_logo_image_url');
    ('body:not(.ie) #main-header.et-fixed-header #logo').attr('src','my_alternative_logo_image_url');
    });
    });

</script>

Answer 1

有一个插件可以检测上/下鼠标滚轮和区域内的速度，叫jquery-mousewheel

我不明白你想要什么，你想在不同的转动步骤改变徽标的src吗？（可能是当页面的不同元素可见时）那么你可以尝试使用它们的滚动偏移位置来捕捉它们：

$(window).on('mousewheel', function(e)
{
     console.log(event.deltaX, event.deltaY, event.deltaFactor);
     if(e.deltaY >= $("element_to_match_0").offset().top)
        $("#your_logo").attr('src','my_alternative_logo_image_url');

     // another element scrolled over
     if(e.deltaY >= $("element_to_match_1").offset().top)
        $("#your_logo").attr('src','my_alternative_logo_image_url');
});

向下滚动事件时更改徽标图像（并在向上滚动时再将其更改回来）

1 个答案: