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

全栈程序员-站长 • 2021年6月14日下午4:00 • 未分类 • 阅读 71

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

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)

全栈程序员-站长

0 0

csv 转 ffm[通俗易懂]

csv 转 ffm[通俗易懂]1.FFM介绍FFM最初的概念来自Yu-ChinJuan与其比赛队员，是他们借鉴了来自MichaelJahrer的论文中的field概念提出了FM的升级版模型。通过引入field的概念，FFM把相同性质的特征归于同一个field。FFM模型不同于常见的DataFrame格式文件，需要将数据格式转换成如下所示的格式：yfield_1:index_1:value_1…

全栈程序员-站长
2022年5月15日
40
java中JDBC是什么？[通俗易懂]

java中JDBC是什么？[通俗易懂]JDBC是什么？JDBC即(javadatabaseconnectivity数据连接)。JDBC是Sun公司编的一堆类和方法，都封装在java.sql包中。你可以利用这堆类和方法来把你的程序和数据库连通。JDBC的优点：跨数据库性通过使用JDBC，开发人员可以将SQL语句传送给几乎任何一种数据库。不必单独写一个程序访问Sybase，Oracle，或Microsoft的SQLServ…

全栈程序员-站长
2022年6月23日
23
CTFHUB——反射型XSS详解「建议收藏」

CTFHUB——反射型XSS详解「建议收藏」背景本来看ctfhub上有xss的题目，打算好好学习一波，结果点开一看，只有一道题2333。便现在dvwa上熟悉了一波。所谓反射型是相对于存储型来讲的。如果黑客的xss注入是通过某种方式储存到了数据库中，那就是存储型的，这种xss的特点就是每次访问该页面都会收到xss攻击，因为js语句已经放在数据库里了。而反射型xss则不是这样，每次触发只能手动输入和点击才能触发。我认为xss产生的原因主要是对便签审查不严格造成的。dvwaxss例题下面写一下dvwa中的三种难度的反射型xss。<?

全栈程序员-站长
2022年5月9日
59
axios的安装和使用

axios的安装和使用文章目录一、axios介绍二、安装axios三、案例一、axios介绍什么是axios?Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。特性:1、从浏览器中创建XMLHttpRequests2、从node.js创建http请求3、支持PromiseAPI4、拦截请求和响应5、转换请求数据和响应数据6、取消请求7、自动转换JSON数据8、客户端支持防御XSRF浏览器支持：二、安装axios方法一：速.

全栈程序员-站长
2025年8月18日
3
浙江python信息技术教材_人工智能、Python…浙江省三到九年级将使用信息技术新修订教材…

浙江python信息技术教材_人工智能、Python…浙江省三到九年级将使用信息技术新修订教材…浙江省教研室相关负责人表示，目前根据现行的高中教材，对小学、初中的老教材进行了修订，新教材将于今年9月投入使用，最新的线上教师培训也刚刚结束。扣哒世界作为全球最大的中小学人工智能和Python代码编程教学平台，已经从2019年开始系统支持浙江省中小学人工智能和Python代码编程师资培训。根据浙江省最新的教材目录，从小学三年级一直到九年级，内容都有不同程度的调整。三年级新增了“信息社会”和“网络生…

全栈程序员-站长
2022年5月16日
36
第四章：redis 数组结构的set和一些通用命令「建议收藏」

第四章：redis 数组结构的set和一些通用命令「建议收藏」第四章：redis 数组结构的set和一些通用命令

全栈程序员-站长
2022年4月23日
50

发表回复

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