<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. linux发版

    使用MobaXterm_v8.5 1.upload需要更换的文件 2.关闭Tomcat    cd /usr/local/tomcat/apache-tomcat-6.0.30-pcitcaly/  ...

  2. Hive presto和hive时间格式转换

    1.北京时间格式   to   unix时间格式 数据格式: 2017-11-17 08:28:13 2017-11-17 08:28:10 2017-11-17 08:27:51.343 2017- ...

  3. gcc -o hello hello.c 执行过程

    GCC编译器驱动程序读取源程序文件hello.c,并将它翻译成一个可执行目标文件hello.这个翻译的过程可分为四个阶段. 1.预处理阶段 预处理器(cpp)根据以字符#开头的命令,修改原始的c程序. ...

  4. 神经网络 fann 教程 英文 以及 翻译 参考

    http://fann.sourceforge.net/fann_en.pdf http://blog.csdn.net/fengshuiyue/article/details/41446257

  5. PHP Yii框架中使用smarty模板

    第一种方法 按照YII系统的办法生成视图觉得有点麻烦,觉得用smarty更省事.尝试着把smarty模板加进来了. date_default_timezone_set("PRC") ...

  6. Git012--Bug&Feature分支

    一.Git--Bug分支 软件开发中,bug就像家常便饭一样.有了bug就需要修复,在Git中,由于分支是如此的强大,所以,每个bug都可以通过一个新的临时分支来修复,修复后,合并分支,然后将临时分支 ...

  7. 21.线程,全局解释器锁(GIL)

    import time from threading import Thread from multiprocessing import Process #计数的方式消耗系统资源 def two_hu ...

  8. hexo博客yilia主题深度设置

    转载:Shuyan http://dongshuyan.com/2019/05/24/hexo博客注意事项/ 1.微信分享异常 这里是themes\yilia\layout\ _partial\pos ...

  9. tensorflow 之Dataset数据集之批量数据

    ###生成批次数据 import tensorflow as tf '''reapt()生成重复数据集 batch()将数据集按批次组合''' file_name = ['img1','img2',' ...

  10. _groovy

    _groovy与beanshell类似,只是它执行的是apache groovy脚本,并返回结果. 如果定义了属性 “groovy.utilities”,属性将会被脚本引擎加载,这样就可以定义一些通用 ...