Question

http://rob.peytongregory.com/

如果你去那个网站并向下滚动，你会看到当从一个div滚动到另一个div时，徽标图像会卡住。我认为这是因为我缺乏jQuery知识。使用css修复图像并使用jQuery淡化。

非常感谢任何帮助。

<script>
        document.getElementById('listen-btn').addEventListener('click', function() {
            document.getElementById('music-player').play();
        });

    $(window).scroll(function() {
        if($(window).scrollTop() > $(document).height()*0.5)
            document.querySelector('#music-player').pause();
    });

    $(window).bind("scroll", function() {
        if ($(this).scrollTop() > $(document).height()*0.3) {
            $("#music-player").fadeIn("slow");
        } else {
            $("#music-player").fadeOut("slow");
        }
    });

    $(window).bind("scroll", function() {
        if ($(this).scrollTop() < $(document).height()*0.2) {
            $("#listen-btn").fadeIn("slow");
        } else {
            $("#listen-btn").fadeOut("slow");
        }
    });

    $(window).bind("scroll", function() {
        if ($(this).scrollTop() < $(document).height()*0.39) {
            $(".main-logo").fadeIn("slow");
        } else {
            $(".main-logo").fadeOut("slow");
        }
    });
    </script>

Answer 1

如果它是我：我会尝试从当前包含的div中删除徽标div，

然后设置徽标div＆＃34; z-index＆＃34;高于所有其他div，这种方式不依赖于fadein和fadeout效果

jQuery修复图像卡在滚动上

1 个答案: