<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. Web上传文件的三种解决方案

    第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname =  ...

  2. 小陈现有2个任务A,B要完成,每个任务分别有若干步骤如下 一道网上没啥题解的难题(至少我是这么觉得的)

    小陈现有2个任务A,B要完成,每个任务分别有若干步骤如下:A=a1->a2->a3,B=b1->b2->b3->b4->b5.在任何时候,小陈只能专心做某个任务的一 ...

  3. [USACO16JAN]愤怒的奶牛Angry Cows (单调队列优化dp)

    题目链接 Solution 应该可以用二分拿部分分,时间 \(O(n^2logn)\) . 然后可以考虑 \(n^2\) \(dp\) ,令 \(f_i\) 代表 \(i\) 点被激活,然后激活 \( ...

  4. JS占位符替换

    String.prototype.format = function() { if(arguments.length === 0) return this; var obj = arguments[0 ...

  5. vue双向数据绑定v-model

    1.双向数据绑定 <input v-model="msg" /> <template> <div id="app"> < ...

  6. pycharm默认的模板修改python script

    #!/usr/bin/env python # encoding: utf-8 #set( $SITE = "https://www.cnblogs.com/c-x-a" ) &q ...

  7. Remote desktop manager共享账号

    因为多个远程机器,是会用了域账号进行登录的.而域账号的密码,三个月之后,密码强制过期 添加一个新的entry,类型是Credential Entry,然后选择用户名/密码 在remote deskto ...

  8. 128、TensorFlow元数据MetaData

    #tf.Session.run也接收一个可选的参数options #能够让你来配置训练时的参数 #run_metadata参数让你能够收集关于训练的元信息 #列如你可以使用这些可选项来追踪执行的信息 ...

  9. EL表达式(二)运算符

    运算符"."和"[]": "."能做的"[]"也能做,"[]"能做的"."不一定 ...

  10. [LeetCode] 421. Maximum XOR of Two Numbers in an Array(位操作)

    传送门 Description Given a non-empty array of numbers, a0, a1, a2, … , an-1, where 0 ≤ ai < 231. Fin ...