码迷,mamicode.com
首页 > Web开发 > 详细

html5 固定边栏滚动特效

时间:2017-09-15 01:42:45      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:html5   事件绑定   position   log   屏幕   script   logs   ati   侧边栏   

                <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 固定边栏滚动特效

标签:html5   事件绑定   position   log   屏幕   script   logs   ati   侧边栏   

原文地址:http://www.cnblogs.com/guangzhou11/p/7523640.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!