얼렁뚱땅코드/그누보드

특정 이상 스크롤 내리면 동작하게 하는 스크립트 1

얼렁뚱땅 디자이너 2021. 11. 24. 10:31
<style>
	#left_banner_main_wrap{width: 1200px;margin: 0 auto;}
	#left_banner_main{position: absolute;left: 8%;z-index: 9999;top: 1%;}
	
	.sticky {position: fixed !important;width: 100%;}
	.sticky + .content {padding-top: 210px;}
</style>
<div id="left_banner_main_wrap">
	<div id="left_banner_main">
		<img src="<?php echo G5_IMG_URL ?>/left_banner01.png" alt="<?php echo $config['cf_title']; ?>"/>
	</div>
</div>
<script>
	$(function(){
		$(window).scroll(function(){  //스크롤하면 아래 코드 실행
		var num = $(this).scrollTop();  // 스크롤값
			if( num > 690 ){  // 스크롤을 690이상 했을 때
			$("#left_banner_main").addClass("sticky"); // #left_banner_main에 클래스값 sticky 줘라 
				}else{
				$("#left_banner_main").removeClass("sticky");
			}
		});
	});
</script>


• position:fixed 됐을때 위치가 움직이는 단점이 있음