1. 程式人生 > >html5 固定邊欄滾動特效

html5 固定邊欄滾動特效

設置 stat 移動 osi http col spa span 條件判斷

                <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 固定邊欄滾動特效