吸顶功能 吸顶是一种比较常见的交互效果,当页面滑出屏幕边界,标题会自动吸附在屏幕边缘,用于提示用户。 基本原理 在H5中实现的基本原理就是判断当前页面滑动的距离scrollTop和标题距离页面顶部距离offsetTop的关系,进而设置标题的position = fixed。这里需要明白scrollT ...
分类:
其他好文 时间:
2020-04-28 17:15:04
阅读次数:
50
var position = $(".element").offset(); position.top = position.top-60; $("html,body").animate({scrollTop:position.top}, 100); 首先获取某元素的位置 第二部 top 就是元素在 ...
分类:
Web程序 时间:
2020-04-27 17:12:05
阅读次数:
300
jQuery 1. 关于jQuery 1.1 什么是jQuery ? jQuery 是一套跨 "浏览器" 的 "JavaScript" "库" ,简化 "HTML" 与JavaScript之间的操作。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择 "文档对象模型 ...
分类:
Web程序 时间:
2020-04-22 13:21:14
阅读次数:
76
我们在项目中经常使用到下拉加载更多,之前要么是底部写加载按钮,要么是引入插件。今天终于有时间手写一个了,之前感觉挺麻烦,明白原理后,其实很简单... 此图片来自于网络 scrollTop:滚动视窗的高度距离window顶部的距离,它会随着往上滚动而不断增加,初始值是0,它是一个变化的值; clien ...
分类:
Web程序 时间:
2020-04-20 22:06:38
阅读次数:
80
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <tit ...
//当前位置向下滚动100px // 不同chrome版本可能适用的不同有的是document.documentElement.scrollTop而有的是 document.body.scrollTop window.scroll(0,parseInt(document.documentElemen ...
分类:
其他好文 时间:
2020-04-10 19:56:37
阅读次数:
74
滚动条距离 window.pageXOffset | window.pageYOffset (IE8 集iE8 以下不兼容) 下面两组都是IE8 的解决方法 但是由于兼容性混乱 两种方法 俩组方法互斥,有一组方法有值的话另一组则为0 解决方法将两个值相加就可以解决问题 document.body.s ...
分类:
其他好文 时间:
2020-04-06 13:29:23
阅读次数:
65
1. document.body.scrollTop 如果这个不行的话,就用下面的,应该是览器下 scrollTop有差异 2. document.documentElement.scrollTop 我这边用的是2,浏览器为谷歌。 ...
分类:
Web程序 时间:
2020-04-06 12:02:49
阅读次数:
124
1,设置滚动条距离顶部的位置 使用示例 js = "window.scrollTo(x,y) " x为水平拖动距离,y为垂直拖动举例 driver.execute_script(js) js= "var q=document.documentElement.scrollTop=n" n为从顶部往下移 ...
分类:
其他好文 时间:
2020-04-03 16:28:24
阅读次数:
78
项目中localStorage实用 项目中h5本地存储的一个小实用,本意使用cookie,但发现chrome调试被禁用,便用了localStorage. 此需求是一贴吧搜索页,在新用户第一次点击搜索框时为搜索页面,老用户点击搜索框时带有搜索记录,实现方法为在点击搜索按钮时便为用户创建一个本地存储lo ...
分类:
编程语言 时间:
2020-03-26 19:25:10
阅读次数:
81