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

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

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


相关推荐

  • linux命令启动MySQL

    linux命令启动MySQL====================================可使用如下命令启动MySQL:servicemysqldstart或者使用如下命令:/etc/init.d/mysqldstart可使用如下命令重新启动MySQL:servicemysqldrestart或者使用如下命令:/etc/init.d/mysqldrestart====…

    2022年5月11日
    41
  • linux 文件锁

    linux 文件锁1.文件锁基本概念Linux中软件、硬件资源都是文件(一切皆文件),文件在多用户环境中是可共享的。文件锁是用于解决资源的共享使用的一种机制:当多个用户需要共享一个文件时,Linux通常采用的方法是给文件上锁,来避免共享的资源产生竞争的状态。文件锁包括建议性锁和强制性锁:建议性锁:要求每个使用上锁文件的进程都要检查是否有锁存在,并且尊重已有的锁。在一般情况下,内核和系统都不使用建议性锁,它们依靠程序员遵守这个规定。强制性锁:是由内核执行的锁,当一个文件被上锁进行写入操作的时候,内核将阻止其他任何

    2022年6月28日
    38
  • HI3516DV300 GPIO操作

    HI3516DV300 GPIO操作前言本次实验根据ProYuan28博主写的博客GPIO文档进行适配调试,特此记录GPIO操作。正文GPIO分为三个步骤:1设置gpio端口复用寄存器;2设置GPIO口的方向寄存器(GPIO_DIR);3设置读取或者写入GPIO值寄存器(GPIO_DATA);实验平台:HI3516DV300…

    2025年11月25日
    5
  • EagleEye: Fast Sub-net Evaluation for Efficient Neural Network Pruning(论文阅读)[通俗易懂]

    EagleEye: Fast Sub-net Evaluation for Efficient Neural Network Pruning(论文阅读)[通俗易懂]目录说明动机贡献方法发现EagleEye剪枝算法实验实验1-相关性的定量分析实验2-基于自适应BN的评估方法的通用性实验3-从修剪候选中选择最佳修剪策略的计算成本实验4-Effectivenessofourproposedmethod总结与讨论说明找出训练好的深度神经网络(DNN)的计算冗余部分是剪枝算法要解决的关键问题。许多算法都试图通过引入各种评估方法来预测修剪后的子网的模型性能。在这个工作中,我们提出了一种称为EagleEye的剪枝方法,其中使用了一个基于自适应批归一化adaptiv

    2022年8月16日
    9
  • nginx转发mysql连接

    nginx转发mysql连接场景:访问UAT环境,只能使用客户电脑访问,太难用了,于是就需要在自己电脑上跑代码,通过客户电脑中转来访问uat环境的数据库。选用nginx进行转发。配置如下:stream{upstreamcloudsocket{hash$remote_addrconsistent;server192.168.182.155:3306weight=5max_fails=3fail_timeout=30s;}server{

    2022年10月19日
    4
  • 前端实现人员关系图谱

    前端实现人员关系图谱入职前端工作到现在差不多有一年半的时间了,和朋友偶然聊天的时候被问到,能不能用所学的前端知识做一个家族关系的族谱,可以使家族关系更加简单明了。当时听完这个需求,觉得可能还是蛮简单的,后来动手做的时候,发现族谱的连线,是需要根据返回的数据动态生成的,这就是我这个小前端,有点头秃了????。解决技术困难当时阻碍我前进的就是如何实现族谱的连线以及根据数据渲染它们的对应关系,后来在逛博客的过程中,发现了antdesign的charts图表组件。利用这个组件,如果可以进行一些改造,可能就可以实现族谱的关系图。

    2022年6月26日
    41

发表回复

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

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