jQuery 관련 팁을 공유하는 곳입니다. [가입을 하셔야 다운로드가 가능합니다.]
글 수 17

스크롤 고정형 퀵배너

2018.09.07 14:17:20

0

조회 수 : 15 신고 : 0

html 소스 

<div class="quick_pos">
	<ul class="quick">
		<li></li>
	</ul>
</div>

 

css 소스

.quick_pos{position:relative;width:100%;min-width:1100px}
.quick_pos .quick{position:absolute;top:50px;left:50%;z-index:60;margin-left:600px}
.quick_pos .quick.fixed{position:fixed}

 

script 소스

/* 퀵배너 스크롤 */
$(window).scroll(function(){
	var quickPos = $('.quick_pos').offset().top;
	var winPos = $(window).scrollTop();

	if( winPos > quickPos ) $('.quick_pos .quick').addClass('fixed');
	else $('.quick_pos .quick').removeClass('fixed');
});

 

html과 css 본인에 사이트에 맞게 꾸며주시면 됩니다.

 

profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://www.webmini.net/jquery/632352/35d/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

첫번째 댓글을 남겨주세요!

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수
17 스크롤 고정형 퀵배너 title: 새싹빽짱구 2018-09-07   15
16 버튼 클릭시 원하는 곳으로 부드럽게 이동 title: 새싹빽짱구 2018-09-07   13
15 jquery 토글 기능 title: 새싹빽짱구 2018-09-06   6
14 해당 영역 높이값 자동으로 가져오기 title: 새싹빽짱구 2016-04-27   144
13 해상도별로 CSS호출하기 title: 새싹빽짱구 2015-10-14   481
12 iscroll 사용시 동적일때 문제 title: 새싹빽짱구 2014-02-20   3515
11 [스크랩] jQuery 팁 & 튜토리얼 title: 새싹사뎅이 2014-01-14   2444
10 제이쿼리 모바일(jquery mobile) 샘플사이트 및 데모 title: 새싹빽짱구 2013-01-29 1 6813
9 버튼이나 텍스트 링크 클릭시 원하는곳으로 부드럽게 이동하기 file [1] title: 새싹빽짱구 2012-10-22 2 5147
8 제이쿼리 및 CSS3,HTML5 관련 튜토리얼입니다. title: [ani]방울UI 2012-10-11   3231
7 jQuery 로 레이어 드래그 하기 title: 새싹빽짱구 2012-09-07   3354
6 jQuery로 파일첨부버튼 이미지로 꾸미기 file title: 새싹빽짱구 2012-09-07   4409
5 jQuery 제이쿼리로 셀렉트 박스 꾸미기 file title: 새싹빽짱구 2012-09-06 1 5514
4 jQuery 부드러운 위로가기 탑(top) 버튼 효과 file [1] title: 새싹빽짱구 2012-08-30   6532
3 jQuery 종류별 효과 모음 title: 새싹빽짱구 2012-03-02 1 7282
2 JQUERY js파일 불러오기~ [2] 늘푸른 2010-07-25 1 7037
1 JQuery 시작하기~ 늘푸른 2010-07-24 1 6529
Top