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

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

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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 《SiamFC++:Towards Robust and Accurate Visual Tracking with Target Estimation Guidelines》论文笔记

    《SiamFC++:Towards Robust and Accurate Visual Tracking with Target Estimation Guidelines》论文笔记参考代码:video_analyst1.概述导读:这篇文章指出之前的一些跟踪算法没有深入讨论针对跟踪任务的实质,很多时候只是在某些点上进行突破,因而最后方法的性能总是有局限性的。对此文章深入分析了跟踪网络的特性,因而对跟踪网络的设计提出了4点建议:G1(目标位置估计和目标判别需要接耦,分别具有各自的分支)/G2(目标判别置信度不能与实际相模糊)/G3(不能依赖数据分布等先验知识,否则导致泛化性鲁棒性不强)/G4(目标位置的估计应该准确)。正是基于上的4点设计指导,文章设计了SiamFC++网络,在5

    2022年9月27日
  • 【AekdyCoin】求多项式方程的一种解法

    【AekdyCoin】求多项式方程的一种解法源地址:http://hi.baidu.com/aekdycoin/archive/tag/%E6%95%B0%E5%AD%A6【问题描述】f(x,n)是一个整系数的x的n次多项式例如f(x,3)=-99x^3+71x^1-97问题是求出最小的正整数解满足f(x,n)=0, 其中系数满足FAC【SOLUTION(1)】f(x,n)=0

    2022年7月23日
  • elasticsearch集群搭建对服务器硬件_elasticsearch集群搭建

    elasticsearch集群搭建对服务器硬件_elasticsearch集群搭建一、ElasticSearch集群1.1搭建集群Elasticsearch如果做集群的话Master节点至少三台服务器或者三个Master实例加入相同集群,三个Master节点最多只能故障一台Master节点,如果故障两个Master节点,Elasticsearch将无法组成集群.会报错,Kibana也无法启动,因为Kibana无法获取集群中的节点信息。由于,我们使用只有一台虚拟机,所以我们在虚拟机中安装三个ES实例,搭建伪集群,而ES启动比较耗内存,所以先设置虚拟机的内存3G和CPU个数4个

    2022年10月10日
  • OPKG 软件包管理

    OPKG 软件包管理Opkg是一个轻量快速的套件管理系统,目前已成为Opensource界嵌入式系统标准。常用于路由、交换机等嵌入式设备中,用来管理软件包的安装升级与下载。中文名opkg属    性套件管理系统更    新可以获取的软件包列表常用于路由、交换机等嵌入式设备常用命令opkgupdate更新可以获取的软件包列表

    2022年6月14日
  • 跳频介绍_跳频功能

    跳频介绍_跳频功能跳频是最常用的扩频方式之一,其工作原理是指收发双方传输信号的载波频率按照预定规律进行离散变化的通信方式,也就是说,通信中使用的载波频率受伪随机变化码的控制而随机跳变。从通信技术的实现方式来说,“跳频”是一种用码序列进行多频频移键控的通信方式,也是一种码控载频跳变的通信系统。从时域上来看,跳频信号是一个多频率的频移键控信号;从频域上来看,跳频信号的频谱是一个在很宽频带上以不等间隔随机跳变的。其中:跳

    2022年10月23日
  • webdriver下载

    webdriver下载chrome浏览器驱动下载地址:http://chromedriver.storage.proxy.ustclug.org/index.htmlchrome版本在80后的chrome版本和chromedriver版本对应firefox浏览器驱动下载地址:https://github.com/mozilla/geckodriver/releasesie浏览器驱动下载地址:http://selenium-release.storage.proxy.ustclug.org/index.htmlIEDriv

    2022年9月19日

发表回复

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

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