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);    
    });
}