【移动端】某个元素上滑隐藏,滑动到第一屏显示

【移动端】某个元素上滑隐藏,滑动到第一屏显示

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

转载于:https://www.cnblogs.com/websmile/p/9773713.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/101376.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • SQLPLUS登陆命令「建议收藏」

    一.SQLPLUS登陆命令:使用sqlplus:10G之前的版本登陆时需要加引号(单、双引号皆可)如:sqlplus"/assysdba"sqlplus-prelim/assysdba&nbsp;&nbsp;&nbsp;&nbsp;从Oracle10g开始,sqlplus提供了一个参数选项-prelim,用这个参数,在系统已经hang的时候可以连接到SGA而不是数据库,也就…

    2022年4月10日
    69
  • mysql聚集索引和覆盖索引_索引快速全扫描

    mysql聚集索引和覆盖索引_索引快速全扫描查询优化:索引覆盖扫描——当索引中的列包含所有查询中要使用的列的时候,就会用到覆盖索引,效率比较高。因为尽量使select后面的字段是where中的索引字段。…

    2022年10月21日
    2
  • java语言的特点_Java语言有什么特点?

    java语言的特点_Java语言有什么特点?Java语言共有十大特点,分别为:简单性、面向对象、分布性、编译和解释性、稳健性、安全性、可移植性、高性能、多线索性、动态性。1、简单性:Java语言继承了C++语言的优点,去掉了C++中学习起来比较难的多继承、指针等概念,所以Java语言学习起来更简单,使用起来也更方便。2、面向对象:Java是一种面向对象的编程语言。3、分布性:Java设计成支持在网络上应用,它是分布式语言。所以只要用Java…

    2022年7月7日
    17
  • php代码检测工具_php代码在线运行

    php代码检测工具_php代码在线运行https://segmentfault.com/q/1010000000119048

    2022年9月28日
    3
  • pycharm无法下载中文_没有python解释器

    pycharm无法下载中文_没有python解释器关于pycham中解释器无法下载的问题

    2022年8月29日
    3
  • 呼叫系统管理服务器图片,呼叫中心系统工作流程原理拓图

    呼叫系统管理服务器图片,呼叫中心系统工作流程原理拓图原标题 呼叫中心系统工作流程原理拓图简单地说 呼叫中心就是一个工作组 他由若干成员组成 这些成员既包括普通的人工座席 也包括一些自动语音设备 语音信箱等 这些成员通过网络实现相互间的通信 并共享网络上的资源 以 CTI 技术为核心的呼叫中心是一个集语音技术 呼叫处理 计算机网络和数据库技术于一体的系统 客服呼叫中心的主要功能就是接受用户来电并为用户提供各种服务 呼叫中心系统原理实现主要在于两个部分

    2025年10月26日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号