html5 固定边栏滚动特效
<script src="https://code.jquery.com/jquery.js"></script> //引入jquery
<script>
//滚动事件绑定
$(window).scroll(function() {
// $(window).scrollTop() 窗口滚动的高度
// $(window).height() 屏幕可见区域的高度
//移动高度+屏幕高度
var windowHeight = $(window).scrollTop() + $(window).height();
var sideHeight = $('#右侧边栏的id名').height();
if (windowHeight > sideHeight) {
$('#右侧边栏的id名').css({
'position' : 'fixed',
right : '0px',
top : -(sideHeight - $(window).height()) //负值
});
} else {
$('#右侧边栏的id名').css({
'position' : 'static'
});
}
});
//适应window的大小 window.onload=function() {
$(window).trigger('scroll');
};
$(window).resize(function(){
$(window).trigger('scroll');
}); </script>
//设置fixed 条件判断
移动高度+屏幕高度>右侧边栏高度
html5 固定边栏滚动特效的更多相关文章
- jquery版固定边栏滚动特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 基于html5海贼王单页视差滚动特效
分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="top"> < ...
- html5和css3实现的3D滚动特效
今天给大家带来一款html5和css3实现的3D滚动特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="container"&g ...
- Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- 9款超绚丽的HTML5/CSS3应用和动画特效
1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...
- 前端 ---- js 模拟百度导航栏滚动案例
模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- JS---封装getScroll函数 & 案例:固定导航栏
封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...
- jquery版楼层滚动特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼 ...
随机推荐
- MyBatis 中的#和$的区别
#相当于对数据 加上 双引号,$相当于直接显示数据 #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的 ...
- tensorflow2.0 squeeze出错
用tf.keras写了自定义层,但在调用自定义层的时候总是报错,找了好久才发现问题所在,所以记下此问题. 问题代码 u=tf.squeeze(tf.expand_dims(tf.expand_dims ...
- ckeditor如何能实现直接粘贴把图片上传到服务器中?
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
- CF700E Cool Slogans 后缀自动机 + right集合线段树合并 + 树形DP
题目描述 给出一个长度为n的字符串s[1],由小写字母组成.定义一个字符串序列s[1....k],满足性质:s[i]在s[i-1] (i>=2)中出现至少两次(位置可重叠),问最大的k是多少,使 ...
- 51nod1446 限制价值树
有N个点(N<=40)标记为0,1,2,...N-1,每个点i有个价值val[i],如果val[i]=-1那么这个点被定义为bad,否则如果val[i] >=0那么这个点为定义为good. ...
- Solr核心(内核)
Solr核心(内核) Solr核心(Core)是Lucene索引的运行实例,包含使用它所需的所有Solr配置文件.我们需要创建一个Solr Core来执行索引和分析等操作. Solr应用程序可以包 ...
- 学习日记10、easyui编辑器combobox绑定数据的两种方式
1.数据本地绑定 var card = [{ "value": "正常", "text": "正常" }, { &quo ...
- drawChild中画阴影,裁剪出圆角
我们在EasyConstraintLayout中初始化paint,并且关闭硬件加速,然后在drawChild中实现阴影逻辑,最终代码如下. public class EasyConstraintLay ...
- localhost和127.0.0.0
,网络通信知识. 127.0.0.1是环回地址,只有本机可以访问 0.0.0.0是本机地址,内网外网均可以访问 localhost是本机域名,只有本机可以访问 ip是分五类
- 一文读懂PID控制算法(抛弃公式,从原理上真正理解PID控制)
PID控制应该算是应用非常广泛的控制算法了.小到控制一个元件的温度,大到控制无人机的飞行姿态和飞行速度等等,都可以使用PID控制.这里我们从原理上来理解PID控制. PID(proportion ...