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 條件判斷
移動高度+屏幕高度>右側邊欄高度

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM