Question

我写了两个功能很好的函数。如果用户位于页面上的某个部分，则一个函数会将HTML视频属性autoplay添加到视频DOM元素。另一个函数将在一些元素中滑动并进行很好的转换。

但缺点是它适用于页面中的一个元素，但我希望它也适用于其他元素。

这是一个在滚动播放视频的功能：

playOnScroll: function() {

    var player = $('.browser video');
    var hasReached = false;

    function isInView(elem){
        return $(elem).offset().top - $(window).scrollTop() < $(elem).height();
    }

    $(window).scroll(function() {

        var section = $('#user-experience');

        // If section exists
        if (section.length) {

            if (isInView(section) && !hasReached) {
                // console.log('play video');
                hasReached = true;
                player.get(0).play();
            }

        }

    });

}

现在，如果可以查看标识为#user-experience的部分，则该功能仅起作用，但如果我可以将该功能用于更多部分，则该功能会很好。

在撰写本文时，我正在考虑将目标部分更改为类名，如果某个部分具有此类，则它将完成其工作。或者有更好的方法来做到这一点吗？

如果我看一下我之前提到过的第二个函数，它会在滚动时处理一些不错的传入动画，我不知道如何为多个元素选择器重用这个函数：

moduleShift: function() {

    var root = this;
    var el = $('.entry figure');
    var offset = 0.8;

    root.isVisible(el, offset);

    $(window).scroll(function() {

        // Get the offset of the window from the top of page
        var windowPos = $(this).scrollTop();

        setTimeout(function(){ 
            root.isVisible(el, offset); 
        }, 1000);

    });

}, 

isVisible: function(el, offset) {

    el.each(function() { 
        var elHeight = $(this).outerHeight();
        var offsetTop = $(this).offset().top;
        var offsetBottom = offsetTop + elHeight;

        if (offsetTop <= $(window).scrollTop() + $(window).height()*offset) {
            $(this).addClass('moduleShift');
        };

    });

}

上面的相同解决方案也应该能够应用于此功能，但是可能与第一个功能相同的问题，有更好的方法吗？

我很感激一些建议。先感谢您。如果还有任何问题，请告诉我。

Answer 1

您可以使用jQuery Waypoints。这可能是最简单的方法。您的函数isVisible和moduleShift应该是用户滚动到某个点时触发的事件的处理程序。例如：

var waypoint = new Waypoint({
  element: document.getElementById('placeOfYourVideoPlayer'),
  handler: moduleShift;
})

这是重用JS函数的正确方法吗？

1 个答案: