怎么更改滚动条的位置php,给网站顶部添加一个滚动条位置百分比教程
网站顶部添加滚动条显示位置百分比教程,这里以FLY模板进行演示,其他网站大同小异。
这个效果参考joe模板来的。综合说一句,网站初衷为的是用户的体验感,在美化的同时,不要丧失理性,带不动的情况下就不要折腾了。
第一步:
打开模板的header.php文件,复制以下代码,粘贴在文件最后,如图。
第二步:
打开 footer.php,把JS代码添加进去如下图:
JS代码:
//加载显示
$(window).scroll(function() {
var a = $(window).scrollTop(),
c = $(document).height(),
b = $(window).height();
scrollPercent = a / (c - b) * 100;
scrollPercent = scrollPercent.toFixed(1);
$("#percentageCounter").css({
width: scrollPercent + "%"
});
}).trigger("scroll");
第三步:
打开CSS文件夹里面的swipebox.css文件 把下面代码添加到最后就行。
#percentageCounter {
position: absolute;
z-index: 1;
left: 0;
bottom: -3px;
height: 3px;
border-radius: 1.5px;
background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff);
transition: width 0.45s;
}
支付宝扫一扫
微信扫一扫
企鹅扫一扫
怎么更改滚动条的位置php,给网站顶部添加一个滚动条位置百分比教程相关推荐
- windows中添加一个网络位置与映射网络驱动器的区别
网络位置 无盘符 只是一个标记,功能不多,例如不能被设备上其它工程访问到 占的通信流量少,如果只是简单的文件传输,可以用这个 网络驱动器 有盘符 相当于本地的磁盘 占的通信流量多 也有说 https: ...
- 网站顶部添加滚动文字
如果我们在自己网站上添加一段滚动的文字会显得更高级一些,下面就看我如何实现的吧: 实现效果[具体看本站] 实现代码[精心整理] // 1.来回滚动 <marquee behavior=" ...
- java 数组 移动位置_将数组元素从一个数组位置移动到另一数组位置
我很难弄清楚如何移动数组元素. 例如,给出以下内容: var arr = [ 'a', 'b', 'c', 'd', 'e']; 我为什么能写入移动功能'd'之前, 'b' ? 或'a'后'c' ? ...
- html的美图片加上2d动画,网站上面添加一个动漫小女孩的html代码 WordPress添加live2d看板娘...
在你博客程序头部文件(header.php)引入界面样式,在 head 标签内插入如下代码 在你博客程序页脚文件(footer.php)引入脚本,在最后一个 标签前插入如下代码: var messag ...
- 如何在你的WordPress网站上添加成本计算器
如果你曾经使用过贷款计算器或价格估算器,你可能已经想知道是否有办法在你的WordPress网站上添加一个成本计算器.有的,而且超级简单.当然,你可以学习一些JavaScript并在几个月内敲出一个像样 ...
- css左右布局代码_如何使用CSS位置来布局网站(带有示例代码)
css左右布局代码 Using CSS position to layout elements on your website can be hard to figure out. What's th ...
- 更改TFS项目中的SharePoint网站端口
在TFS初始配置的时候,用的公司内网,由于公司网络安全的限制,主机无法公开到互联网上,经过部门申请后,只公开了80端口,随之将TFS服务器的端口改为这个端口.而之前与项目关联的SharePoint网站 ...
- 如何更改服务器上的数据库文件夹,如何设置数据库文件位置
如何设置数据库文件位置 08/07/2014 本文内容 适用于: Exchange Server 2007 SP3, Exchange Server 2007 SP2, Exchange Server ...
- 计算机桌面文件保存位置是哪里,电脑微信接收文件存放位置在哪?怎么更改文件存放位置...
最近同事比较喜欢通过微信发送文件给我,每次查找电脑版微信接收的文件都不知所措,所以很有必要知道电脑微信接收文件的存放位置,同时能够更改电脑微信接收文件存放位置就更完美了. 电脑微信存放位置 C:\Us ...
最新文章
- Upload上传图片
- 如何用一句话证明你学过 NLP ?
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
- tinycore Network card configuration during exec bootlocal.sh
- 录取率查询和申请结果查询平台分享
- ZYNQ7000程序编译成功但烧写报错(使用Vitis2020.2)
- UART_RECV详细设计方案
- 标定板标定和九点标定的区别_标定系列一 | 机器人手眼标定的基础理论分析
- 【渝粤题库】陕西师范大学800001 自然地理学
- oracle 修改sgamaxsize_Oracle修改表空间大小
- Linux下使用润乾设计器
- matlab 有源高滤波器,基于MATLAB有源滤波器的研究设计.ppt
- synology nfs_如何在Synology NAS桌面上创建,重新排列,组织和删除快捷方式
- 9款好看又实用的手机APP UI模板
- Windows10 关于系统中断CPU占用过高导致电脑变卡的解决办法
- 服务器开机显示器没反应,老司机教你开机显示器没反应怎么办
- 【面试经典】求解金矿问题(动态规划初级)
- 如何改进项目的经验教训总结会
- 沁阳市计算机硬件市场主要分布地,太行山石种分类及太行奇石资源产地分布(图)...
- 怡丰机器人上市_成立三年之内 机器人领域的这些黑马公司不可不知
热门文章
- cocos2d-x 执行在 genymotion上面
- 第三回 Bootstrap3.x 起步
- 快速排序的递归方式和非递归方式
- 标准BT.656并行数据结构
- .net下汇总搜索引擎关键字编码
- 获得国内中国电信,网通,铁通的最新ip段的方法
- spring-boot-maven-plugin 插件
- 阅读《大型网站技术架构:核心原理与案例分析》第五、六、七章
- Python 的PIL,可以解决ImportError The _imagingft C module is not installed
- 哦~最重要的产品链接忘了发了