Question

示例页面：http://550.9f2.myftpupload.com/speaking-engagements/

使用Wordpress（Visual Composer）构建。

在页面中间附近，您会看到一个带引号的黄色滑块，它会自动在每张幻灯片之间滚动。因为每张幻灯片的大小会根据文本的数量而变化，所以我需要在用户滚过它时自动滑动停止。否则，当滑块穿过不同的幻灯片时，下面的内容会上下跳动。

我的在线研究告诉我这应该用Javascript / jQuery完成？我根本不熟悉，有没有人有任何关于新手如何实现这一点的提示？

Answer 1

你应该注意两件事：

1）检测到滑动滑块对于用户是可见的。有几种解决方案，例如this或this

2）根据滑块可见性停止/启动滑块。将它们组合在一起，代码看起来就像这样。它是概念性的，未经过测试，但我认为这个想法很清楚。

jQuery(window).scroll(function($) {

    function isScrolledIntoView(elem)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }


    if (isScrolledIntoView($('.rd_testimonials'))){
        $('.rd_testimonials').carouFredSel({auto: false});
    } else {
        $('.rd_testimonials').carouFredSel({auto: true});
    }

});

停止滑块在视口外滚动？

1 个答案: