<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 固定边栏滚动特效的更多相关文章

  1. jquery版固定边栏滚动特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  2. 基于html5海贼王单页视差滚动特效

    分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="top"> < ...

  3. html5和css3实现的3D滚动特效

    今天给大家带来一款html5和css3实现的3D滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"&g ...

  4. Sequence.js 实现带有视差滚动特效的图片滑块

    Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...

  5. fullpage.js 结合固定导航栏—实现定位导航栏

    开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...

  6. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  7. 前端 ---- js 模拟百度导航栏滚动案例

    模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. JS---封装getScroll函数 & 案例:固定导航栏

    封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...

  9. jquery版楼层滚动特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼 ...

随机推荐

  1. 禁止input输入框输入指定内容

    链接: http://blog.csdn.net/xiaoya_syt/article/details/52746598

  2. ASP 转换HTML特殊字符

    Function HtmlDecode(ByVal s) If Has(s) Then s = regReplace(s, "<br\s*/?\s*>", vbCrLf ...

  3. Java多线程,实现卖电影票的业务

    本篇重点:多线程共享资源时发生的互斥问题 一般的我们售卖电影票或者火车票时会有多个窗口同时买票, 我们来看测试代码:主方法new一个Ticket(一个堆),之后三个线程来启动(三个窗口买票) clas ...

  4. Java控制台输入字符串及字符串比较

    需求描述:茵茵很喜欢研究车牌号码,从车牌号码上可以看出号码注册的早晚,据研究发现,车牌号码是按字典序发放的,现在她收集了很多车牌号码,请你设计程序帮她判断注册较早的号码.车牌号码由5个字母或数字组成. ...

  5. Spring 注解配置 WebApplicationContext

    https://docs.spring.io/spring-framework/docs/4.3.9.RELEASE/spring-framework-reference/htmlsingle/#be ...

  6. SAT算法

    今早用微云打的笔记...头大 我惊,这不是可爱的离散吗?! 建个有向图G,(Xi+Yi)加两边表示( ¬Xi+Yi)(Xi+ ¬Yi) 每个点(eg:A)加上 ¬A 下图为:(A->B)·( ¬ ...

  7. 全文搜索 ElasticSearch

    今天突然想了解一下ES,看看有什么优势,能不能用在项目中. 说到ES就不得不了解它的底层技术-全文检索 Ref: 全文检索的基本原理 https://blog.csdn.net/wangmaohong ...

  8. 20190825 On Java8 第十二章 集合

    第十二章 集合 java.util 库提供了一套相当完整的集合类(collection classes)来解决这个问题,其中基本的类型有 List . Set . Queue 和 Map. 不要在新代 ...

  9. php用什么软件编程

    准备好好学习学习PHP了吗?那么你首先应该考虑用什么开发工具(IDE).市面上有很多这类工具,收费的有,免费的也有,选择起来并不轻松. 如果你说PHP编程用基础的文本编辑软件就可以了,比如用记事本.是 ...

  10. Eclipse常见版本和JDK常用版本对应关系

    Luna 4.4  JDK1.6Mars 4.5  JDK1.7             Neon 4.6  JDK1.8Oxygen 4.7 JDK1.8Photon 4.8  2019年3月