1. <script src="https://code.jquery.com/jquery.js"></script> //引入jquery
  2. <script>
  3. //滚动事件绑定
  4. $(window).scroll(function() {
  5. // $(window).scrollTop() 窗口滚动的高度
  6. // $(window).height() 屏幕可见区域的高度
  7. //移动高度+屏幕高度
  8. var windowHeight = $(window).scrollTop() + $(window).height();
  9. var sideHeight = $('#右侧边栏的id名').height();
  10. if (windowHeight > sideHeight) {
  11. $('#右侧边栏的id名').css({
  12. 'position' : 'fixed',
  13. right : '0px',
  14. top : -(sideHeight - $(window).height()) //负值
  15. });
  16. } else {
  17. $('#右侧边栏的id名').css({
  18. 'position' : 'static'
  19. });
  20. }
  21. });
  22. //适应window的大小
  23.  
  24. window.onload=function() {
  25. $(window).trigger('scroll');
  26. };
  27. $(window).resize(function(){
  28. $(window).trigger('scroll');
  29. });
  30.  
  31. </script>
  32. //设置fixed 条件判断
  33. 移动高度+屏幕高度>右侧边栏高度

  

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. 如何安装 mcrypt

    #cd libmcrypt-2.5.8 #./configure #make #make install 说明:libmcript默认安装在/usr/local3.安装mhash #tar -zxvf ...

  2. NoSQL数据库的分布式算法详解

    系统的可扩展性是推动NoSQL运动发展的的主要理由,包含了分布式系统协调,故障转移,资源管理和许多其他特性.这么讲使得NoSQL听起来像是一个大筐,什么都能塞进去.尽管NoSQL运动并没有给分布式数据 ...

  3. HTML计算机代码元素

    计算机代码 1 2 3 4 5 6 var person = {     firstName:"Bill",     lastName:"Gates",     ...

  4. Trailing Zeroes (III) -;lightoj 1138

    Trailing Zeroes (III)   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB Y ...

  5. 如何在微信小程序中使用iconfont

    开篇废话 开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...

  6. MySQL5.7.21报错:[Err] 1055

    [Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated c ...

  7. 新手如何创建一个vue项目 ---vue---新手创建第一个项目

    1.第一步安装node.js https://nodejs.org/en/ 前期可以下载软件包,后期熟练以后可以通过nvm进行 Node的版本切换以及升级 然后window+r  输入cmd 打开命令 ...

  8. 测开之路七十一:监控平台之js

    监控平台的js //datetimepicker的初始化函数(主要是对选择时间的下拉框)function init_datetimepicker() { //初始化格式和规则 $('#start'). ...

  9. delphi idhttpsever

    http://blog.csdn.net/chelen_jak/article/details/50203809 delphi idhttpsever 2015-12-07 11:36 216人阅读  ...

  10. MySQL 1130错误,无法远程连接

    错误:ERROR 1130: Host '192.168.1.3' is not allowed to connect to thisMySQL serve 错误1130:主机192.168.1.3” ...