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

Posted 2023-05-07

【中文标题】jQuery：HTML5音频控件仅在播放时浮动

【英文标题】：jQuery: HTML5 audio control floating only when playing

【发布时间】：2019-05-13 07:06:16

【问题描述】：

我将以下脚本与 audio controls class="box follow-scroll" 一起使用，使其在页面滚动时浮动。但我想知道是否可以仅在音频处于 play 或 pause 模式时使其浮动?如果它停止了，它没有启动，它会停留在原来的位置。

$(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>

【问题讨论】：

将事件监听器添加到您的音频元素。看看这个答案：***.com/a/35537318/4746087

是的，它应该可以工作.. 但我不知道如何用代码实现它.. 你能按照建议添加编辑脚本的回复吗？谢谢。

你能提供你的html和css代码吗？

用html更新问题，没有css。

这是一个 jsfiddle 示例：jsfiddle.net/r4vpt8yk

【参考方案1】：

为您的音频元素添加两个事件监听器。一种在播放音频时开始浮动，另一种在暂停时重置音频元素。在以下示例中，stopFloating() 通过将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);    
    );