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

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

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


相关推荐

  • YUV格式到底是什么?

    YUV格式到底是什么?简介YUV是视频、图片、相机等应用中使用的一类图像格式,实际上是所有“YUV”像素格式共有的颜色空间的名称。与RGB格式(红-绿-蓝)不同,YUV是用一个称为Y(相当于灰度)的“亮度”分量和两个“色度”分量表示,分别称为U(蓝色投影)和V(红色投影),由此得名。YUV也可以称为YCbCr,虽然这些术语意味着略有不同,但它们往往会混淆并可互换使用。Y表示亮度分量:如果只显示Y的话,…

    2022年7月16日
    26
  • Java实现XML字符串转JSON对象

    Java实现XML字符串转JSON对象XML 文件 ErrorRespons http mws amazonservic com doc 2009 01 01 Error Type Sender Type Code InvalidClien Code Error ErrorRespons http

    2025年12月11日
    5
  • django 异常处理_error for wireless request

    django 异常处理_error for wireless request前言在讲解如何解决migrate报错原因前,我们先要了解migrate做了什么事情,migrate:将新生成的迁移脚本。映射到数据库中。创建新的表或者修改表的结构。问题1:migrate怎么判断哪

    2022年7月28日
    11
  • linux下elasticsearch 安装、配置及示例「建议收藏」

    linux下elasticsearch 安装、配置及示例「建议收藏」简介开始学es,我习惯边学边记,总结出现的问题和解决方法。本文是在两台linux虚拟机下,安装了三个节点。本次搭建es同时实践了两种模式——单机模式和分布式模式。条件允许的话,可以在多台机器上配置es节点,如果你机器性能有限,那么可以在一台虚拟机上完成多节点的配置。如图,是本次3个节点的分布。hostnameIPes节点master192.168.137.100

    2022年6月16日
    36
  • php 该如何获取从百度搜索进入网站的关键词

    php 该如何获取从百度搜索进入网站的关键词

    2021年10月30日
    41
  • 程序员该不该去外包公司_程序员项目外包

    程序员该不该去外包公司_程序员项目外包最近,关于“外包”的话题,在程序员之间讨论得十分热烈。究竟什么叫外包呢?在IT行业,有些程序员在大公司的办公楼里,跟正式员工们一起工作。但是,他们并不隶属于这家公司,而是属于第三方公司,比如博彦科技,比如文思海辉,比如中软国际……这些人就像是后妈的孩子,他们的薪酬远不如大公司的正式工,上升空间也有限。他们有个共同的名字,叫做外包人员。那么,年轻的程序员们该不该进入…

    2022年9月30日
    2

发表回复

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

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