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>楼 ...
随机推荐
- linux运维、架构之路-Zabbix监控
一.监控常用命令 1.物理服务器监控命令 ①添加yum源 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/rep ...
- LightOJ 1342 Aladdin and the Magical Sticks [想法题]
题目链接 : http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=27050 --------------------------- ...
- springboot参数校验
为了能够进行嵌套验证,必须手动在Item实体的props字段上明确指出这个字段里面的实体也要进行验证.由于@Validated不能用在成员属性(字段)上,但是@Valid能加在成员属性(字段)上,而且 ...
- javascript-object对象属性操作之Object.defineProperty
一.基本用法简介 声明一个简单的对象,如下 var obj = { name: 'ldld' } 我们可以用Object.defineProperty来声明这个对象 var obj = {} Obje ...
- Red Hat Linux下安装JDK
1. 下载Linux平台的JDK 下载对应操作系统的jdk,操作系统是32位的就下32位的jdk,64位的就下64位的jdk.下错了装不上的. 下载地址:http://www.Oracle.com/t ...
- Jmeter接口测试报告模板优化
优化后在接口报告的接口信息中,直接展示url,method,结果和响应时间,详情中展示请求和响应数据.具体如下: 模板文件 jmeter-results-detail-report_21.xsl: & ...
- c++虚函数与重载
class base{ public: virtual void f(int n){ cout << "base"<<endl; } }; class De ...
- Bootstrap 学习笔记12 轮播插件
轮播插件: <!-- data-ride="carousel"自动播放 --> <div id="myCarousel" class=&quo ...
- Angular 输入中的禁止特定输入值--Validator 与 Directive 实现
1 前言 最近在项目中涉及表单的情况下,需要对用户输入进行过滤,比如填写用户名的时候不可以使用空格或者特殊符号,这里有几个解决方法: 使用 Angular 的正则同步验证器 使用 RxJS对输入的值进 ...
- Show Me the Code
最近在练习写Python代码,拥有150多道程序员面试题的LeetCode注重算法的实现,锻炼思维,还能在线测试代码的正确性,而Python练习册涉及到了Python实际的应用,锻炼解决问题的能力,托 ...