利用窗体滚动做点简单的效果

浏览:177 发布日期:2018/06/21 分类:技术分享 关键字: scrollTop $(window).scroll 可视区和非可视区显示不同效果
//主要测试scrollTop
//测试功能:按钮在你设置的可视区域内显示一种效果,反之显示另一种效果
//由于编辑器无法上传效果图,所以没办法看到效果了,其实效果类似网站右下角的“回到顶部”。
HTML代码:<div class="full-into-name"><span class="glyphicon glyphicon-plus"></span>报名</div>
        <div class="full-into-name-div"><span class="glyphicon glyphicon-plus"></span>报名</div>
初始样式:.full-into-name{
    border-radius: 23px;
    background-color: rgb(54,191,126);
    color: white;
    width: 25%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
}
.full-into-name-div{
    display: none;
    border-radius: 23px;
    background-color: rgb(54,191,126);
    color: white;
    width: 25%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
}
JS代码:$(function () {
        $(window).scroll(function () {
            //两个div设置同样样式,一个在屏幕可视区滑动时显示,反之另一个隐藏
            var obj = $('.full-into-name');
            var obj_div = $('.full-into-name-div');

            var top = $(window).scrollTop();
            if(top <= 1500){
                $(obj).fadeOut(800);
                $(obj_div).css({
                    'border-radius': '23px',
                    'background-color': 'rgb(54,191,126)',
                    'color': 'white',
                    'width': '25%',
                    'height': '45px',
                    'line-height': '45px',
                    'text-align': 'center',
                    'font-size': '16px',
                    'position': 'fixed',
                    'bottom': '5px'
                });
                $(obj_div).fadeIn(800);
            }else {
                $(obj).fadeIn(800);
                $(obj_div).fadeOut(800);
            }
        });
    });
最佳答案
评论( 相关
后面还有条评论,点击查看>>