PC鼠标滚动到某一位置显示元素

预览地址：https://www.dnatime.com/product.html

productList
    - productListTab
          - li.active
          - li
          - li
    - productListConWrap
          - ul.active
          - ul
          - ul

需要在页面中引用
<script src="js/jquery.min.js"></script>
<script src="js/jq.scrollAnimate.min.js"></script>

$(".productListCon li").scrollAnimate({animateSingle: true, threshold: -150});  
/animateSingle 是否来回执行
/threshold: -150  滚动距离

    $('.productListTab li').click(function() {   /点击tab切换
        let index = $(this).index();    /获取点击的下标数字
        console.log(index);
        $(this).addClass('active').siblings().removeClass('active');   /给这个添加active 其他的移除
        $('.productListConWrap>ul').eq(index).addClass('active').siblings().removeClass('active');
        /获取相对的内容  添加active显示  邻居隐藏

        $('.productListConWrap>ul').eq(index).find('li').removeClass('start');
        /获取他里面的li,移除start类名
        /start作用：显示并向上50px
        /
        .productListCon.active li {
            opacity: 0;
            transform: translateY(-50px);
            -moz-transform: translateY(-50px);
            -ms-transform: translateY(-50px);
            -webkit-transform: translateY(-50px);
        }
        .productListCon.active li.start {
            -webkit-transition: all .8s ease;
            -ms-transition: all .8s ease;
            -moz-transition: all .8s ease;
            transition: all .8s ease;
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            -moz-transform: translateY(0);
            transform: translateY(0);
        }
        /
        $(".productListCon li").scrollAnimate({animateSingle: true, threshold: -150});
        /这一行的作用就是切换的时候，会默认显示能看到的li。不加的话需要滚动才加载。
        /当tab点击的时候 就执行。
});

jq.scrollAnimate.min.js 下载地址：

链接: https://pan.baidu.com/s/11i-wiF3DD3xfzDuEx8M_uA 密码: t2yn

原理：

http://js.jirengu.com/rajurudawi/9
通过计算:窗口高度+滚动高度 大于/小于等于 这个元素距离顶部的距离 来控制是否对该元素进行操作

JQ中$(document).scrollTop()与$(window).scrollTop()区别?

浏览器的默认滚动条用$(window).scrollTop()和$(document).scrollTop()效果相同
但是$(window).scrollTop()被所有浏览器支持.