그동안
138
2019-11-09 10:55:06
2
114

스크롤 내리면 특정 div 위치를 fixed 시키려고 하는데요.


스크롤 내리면 특정 div 위치를 fixed 시키려고 하는데요.

몇일째 이렇게 저렇게 해봐도 안되네요. 혹시 아시는 분 답변 좀 부탁 드립니다~~ 


$('.filter-container').addClass('.filter-container-Fixed');  <==== addclass가 안 붙는거 같습니다.

- 직접 .filter-container에 .filter-container-Fixed를 붙이니 fixed가 되는거 보니, CSS나 다른 부분은 이상이 없는 것도 같은데;;


<script>
	$(document).ready( function() 
	{
		var filter_Offset = $('.filter-container').offset();

		$(window).scroll(function() 
		{
			if ( $(document).scrollTop() > filter_Offset.top ) 
			{
			   $('.filter-container').addClass('.filter-container-Fixed');
			} 
			else 
			{
			   $('.filter-container').removeClass('.filter-container-Fixed');
			}
		});
	});
</script>



<div class="job_type">
    <div class="filter_gnb">			
		<div class="tab-type01 n7">
			<ul>
				<li id="job_type" class="on"><a href="#none"><span>직종</span></a></li>
				<li id="career_yyyy"><a href="#none"><span>년차</span></a></li>
			</ul>
		</div>
	</div>
	<div class="filter-container">
		<div class="chk-list">
			<span class="chk-item">
				<input type="checkbox" id="check1-3" name="job_type" value="퍼블리셔">
				<label for="check1-3"><span class="icon"></span>퍼블리셔</label>
			</span>
			<span class="chk-item">
				<input type="checkbox" id="check1-4" name="job_type" value="디자이너">
				<label for="check1-4"><span class="icon"></span>디자이너</label>
			</span>
		</div>
	</div>
</div>




.filter-container{width:1248px;margin:-5px auto 0;padding:20px 40px 15px 76px;background:#f8f8f8;border:1px solid #c8c8c8;box-sizing:border-box;}
.filter-container .chk-list .chk-item{float:inherit;width:127px;margin-right:10px;}
.filter-container .chk-list input[type=checkbox]+label{color:#666;font-size:13px;line-height:36px;}
.filter-container .skill-section{position:relative;margin:13px 0 20px;}
.filter-container .skill-section:after{content:'';display:block;clear:both;}
.filter-container .skill-section .stit{position:absolute;top:7px;font-weight:600;width:130px;font-size:15px;}
.filter-container .skill-section .chk-list{margin-left:150px;}
.filter-container .range-wrap{position:relative;padding-right:36px;margin:35px 0 15px;}
.filter-container .range-wrap .t-min{position:absolute;top:-25px;font-size:13px;color:#666;}
.filter-container .range-wrap .t-max{position:absolute;top:-25px;right:34px;font-size:13px;color:#666;}
.filter-container .radio-item ~ .radio-item{margin-left:30px;}
.filter-container .radio-item input[type=radio]+label{height:35px;line-height:37px;color:#666;font-size:13px;}
.filter-container .radio-item input[type=radio]+label .icon{top:50%;margin-top:-8px;}
.filter-container-Fixed{position:fixed; top:70px; z-index:100;}


0
0
  • 답변 2

  • 추추
    85
    2019-11-09 14:46:49
    $('.filter-container').addClass('.filter-container-Fixed');

    이렇게 하면 


    <div class="filter-container .filter-container-Fixed">

    정말로 그대로 이렇게 붙습니다.


    클래스 이름 넣고 뺄 때 . 떼세요

    0
  • 그동안
    138
    2019-11-09 15:39:32

    추추님, 주말에 답변 주셔서 감사드려요~ㅎ  덕분에 잘 해결됐어요^^

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.