zoukankan      html  css  js  c++  java
  • 【移动端】某个元素上滑隐藏,滑动到第一屏显示

    css:

    .first-screen .swiper-arrow{
        position:fixed;
        bottom:0.9375rem;
        left:50%;
        margin-left:-0.4rem;
        width:0.8rem;
        height:0.5rem;
        background:url(../../../images/upglide_icon@2x.png) center no-repeat;
        background-size:cover;
        -webkit-animation: twinkling 1s infinite ease-in-out;
    }
    @-webkit-keyframes twinkling{    /*透明度由0到1*/
        0%{
            opacity:0; /*透明度为0*/
        }
        50%{
            opacity:0.5; /*透明度为0.5*/
        }
        100%{
            opacity:1; /*透明度为1*/
        }
    }

    html

    <span class="swiper-arrow"></span>

    js:

    $(window).scroll(function () {
        // 滚动条距离顶部的距离 大于 200px时
        if($(window).scrollTop() >= 200){
            $(".swiper-arrow").css('display', 'none');
        } else{
                $(".swiper-arrow").css('display', 'block');
        }
    });

    作者:smile.轉角

    QQ:493177502

  • 相关阅读:
    ubuntu 16.04 安装显卡驱动,再安装cuda
    8. golang 基本类型转换
    7.golang的字符串 string
    5. 变量定义
    4. 代码规范
    3.golang 的注释
    1.windows server 201x
    exec 命令
    powershell
    1.Dockerfile
  • 原文地址:https://www.cnblogs.com/websmile/p/9773713.html
Copyright © 2011-2022 走看看