[淘宝双品节]仿淘宝双11卖场专题两侧缩放导航效果源码

更新时间：2019-09-18 来源：页面特效手机版 字体：大中小

【www.bbyears.com--页面特效】

效果描述：

默认不显示两侧浮动导航，当页面滚动到一定位置时，两侧的导航内容以缩放显示的效果展示出来，当往上拖动滚动条至该位置临界点时两侧导航再以缩放显示的效果逐渐淡出显示！

实现思路：

2侧导航用postion:fixed定位，并默认visibility: hidden;当拖动滚动条至临界点位置时重新设置visibility: visible ,并用 css3 的transform 和 transition属性去实现缩放显示的效果。

关键代码是js根据滚动值去增删相应的class，以及相应class的transform 和 transition属性定义。

完整源码如下：


    测试页面
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

    <script>
    $(function(){
        var temp=parseInt($(".test").css("bottom"));
        $(window).scroll(function(event) {
            $(".test").css({
                bottom:temp-$(window).scrollTop()
            })
            if($(window).scrollTop()>100){
                console.log("a");
                $(".anim-nav").hasClass("anim-nav-show")?"":$(".anim-nav").addClass("anim-nav-show");
            }else{
                $(".anim-nav").removeClass("anim-nav-show");
            }
        });
    })
    </script>

<script>
</script>