jQuery：HTML5音频控件仅在播放时浮动

Question

我正在将以下脚本与音频控件class =“ box follow-scroll”配合使用，以使其在页面滚动时浮动。 但是我想知道是否有可能仅在音频处于播放或暂停模式时才使其浮动？ 如果停止，它没有开始，它将停留在原处。

$(window).load(function(){

    (function($) {
        var element = $('.follow-scroll'),
            originalY = element.offset().top;

        var topMargin = 20;
        element.css('position', 'relative');

        $(window).on('scroll', function(event) {
            var scrollTop = $(window).scrollTop();

            element.stop(false, false).animate({
                top: scrollTop < originalY ? 0 : scrollTop - originalY + topMargin
            }, 300);
        });
    })(jQuery);

});

的HTML：

<audio controls class="box follow-scroll">
<source src="http://techslides.com/demos/samples/sample.ogg" type="audio/ogg">
<source src="http://techslides.com/demos/samples/sample.mp3" type="audio/mpeg">
</audio>

Answer 1

将两个事件侦听器添加到您的音频元素。 一种在播放音频时开始浮动，另一种在暂停时重置音频元素。 在下面的示例中， stopFloating()通过设置var scrollTop = 0;重置音频元素var scrollTop = 0; 归零。 您当然可以进一步调整此功能。

就像是：

var element = $('.follow-scroll'), originalY = element.offset().top;

var topMargin = 20;
element.css('position', 'relative');

element[0].addEventListener("playing", function() {
    startFloating();
});

element[0].addEventListener("pause", function() {
    stopFloating();
});


function startFloating () {
    $(window).on('scroll', function(event) {

        var scrollTop = $(window).scrollTop();

        element.stop(false, false).animate({
                top: scrollTop < originalY ? 0 : scrollTop - originalY + topMargin
        }, 300);    
    });
}

// Reset your element
function stopFloating () {
    $(window).on('scroll', function(event) {

        var scrollTop = 0;

        element.stop(false, false).animate({
                top: scrollTop < originalY ? 0 : scrollTop - originalY + topMargin
        }, 300);    
    });
}