<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. Jira插件安装

    以下操作需要反编译 1.反编译的jar包 1)E:\JIRA安装路径\atlassian-jira\WEB-INF\atlassian-bundled-plugins\atlassian-univer ...

  2. python requests使用登陆之后的cookie

    def getcontent(self): cookie_text=r'ur=FTW; mid=WsrlLwAEAAEfpCstNyTJl-1oZa0w; ig_pr=1; ig_vh=949; cs ...

  3. python中用os.walk查找全部的子文件

    import os import shutil # 要遍历查找的文件所在的父文件夹 trajectory_filename =r"D:\mapping" # 要粘贴到的目标文件夹 ...

  4. PHP7.2中AES加密解密方法mcrypt_module_open()替换方案 Function mcrypt_get_block_size() is deprecated

    直接粘代码,该类是基于微信公众号消息加密解密所提供的PHP DEMO改造而来,目前使用于彬彬大学APP接口token校验中. php的mcrypt 扩展已经过时了大约10年,并且用起来很复杂.因此它被 ...

  5. python web自动化测试框架搭建(功能&接口)——功能测试模块

    功能测试使用selenium,模块有: 1.futil: 公共方法,如元素高亮显示 # coding=utf-8 """高亮显示元素""" ...

  6. 16/7/8_PHP-书写规范 PHP Coding Standard

    变量命名规范这里感觉 打算采用 匈牙利命名法+驼峰法命名,因为 PHP是弱类型语言,很多时间因为忽略了变量类型而导致犯一些低级错误.所以在前面加上类型名有助于更好的理解代码. 下载是转载 PHP书写规 ...

  7. python匿名函数应用--动态计算器

    匿名函数: 一般用于函数体较为简单的运算,和一些不需要函数名的传递.  lambda 参数1:运算举例:  func = lambda x,y:x+y :可以给匿名函数添加变量名. 匿名函数的应用: ...

  8. 怎么查看keras 或者 tensorflow 正在使用的GPU

    查看keras认得到的GPU from keras import backend as K K.tensorflow_backend._get_available_gpus() Out[28]: [' ...

  9. Java thread(4)

    这一块主要是讨论关于进程同步的相关问题,主要是考虑一下的关键字:锁对象.条件对象 -> synchronized wait() notify(). 1.关于锁对象与条件对象: 所对象的定义在ja ...

  10. EasyUI的datagrid有值但是显示不出来

    $("#goodsList").datagrid({  url: "../Ajax/GoodsAjax.ashx",  queryParams:  {  cmd ...