html5 固定边栏滚动特效

                <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 条件判断
移动高度+屏幕高度>右侧边栏高度

  

时间: 2024-12-14 04:17:21

html5 固定边栏滚动特效的相关文章

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

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

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

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

扒皮下腾讯网站地图页面页卡的滚动特效

今天要扒的是腾讯网站地图页面(http://www.qq.com/map/)页卡滚动效果,见下图 有兴趣的童鞋可以去那页面试一试,其动画效果见下图: 那么先理下思路:上方的按钮对应下方的某个栏目,点击某按钮时,其对应的栏目(暂且称为A吧)滚到最上方,原本在A前方的栏目则在滚动结束后自动跳到最后面(这里要注意顺序,比如在A前面有2个栏目B和C,那么B滚完便跳到最后,然后C开始滚,C滚完跳到最后面). 咱这里说的“跳”可以用append实现,即把前面的元素有序地移到最后.至于滚动,可以在全部栏目外围

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

1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航. 在线演示 源码下载 2.HTML5/CSS3 3D纸片折叠动画 今天我们再来分享一款非常华丽的HTML5/CSS3 3D动画特效,尽管它目前很少能在项目中应用,但从源码中我们可以学到很多HTML5 3D动画的制作知

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

Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验. 效果演示     插件下载 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计 让网站动起来!12款优秀的 jQuery 动画插件 十分惊艳的8个 HTM

网页固定側栏的做法

固定側边的做法有非常多种,今天为大家介绍一种非常简单的做法. 整个html文档仅仅有23行代码就搞定了. 网上也有非常多做法,可是都太过复杂.一大堆代码.并且有的非常採用一些jquery的一些插件. 側栏的做法和顶部.页脚都大致雷同. 掌握当中的一种,其它的都非常easy实现.常见的样例有:新浪微博的菜单条,新浪体育的右側二维码扫描等功能都是这种实现. 这种固定特定部位,而不随滚动栏滚动的做法,见以下代码: <!DOCTYPE html> <html> <head> &

淘宝分类导航条;纯css实现固定导航栏

效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="t

jquery版楼层滚动特效

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼层滚动特效</title> </head> <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></scri

CSS3超酷移动手机滑动隐藏側边栏菜单特效

这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效. 这四种效果各自是:默认的点击滑动側边栏菜单效果.带3D transforms的滑动側边栏效果.文字缩放和淡入淡出效果的滑动側边栏以及使用translate来实现滑动側边栏的效果. 每个滑动側边栏效果都带有从右到左淡入淡出的滑动过渡效果. 菜单条中的菜单项以一个接一个的方式显示,这样的效果是通过为它们分别加入 transition-delay 来实现的.以下来看看默认的滑动側边栏效果的制作方法. 插件中使用了font-awesom