2026, 새로운 도약을 시작합니다.

스크롤 메뉴 jQuery 적용

팁란 찾아보고 안보이길래 적어봅니다.

먼저
http://webnoon.net/entry/jQuery-%EA%B0%95%EC%A2%8C3-%EC%8A%A4%ED%81%AC%EB%A1%A4%EB%B0%94-%EB%94%B0%EB%9D%BC%EB%8B%A4%EB%8B%88%EB%8A%94-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EB%A9%94%EB%89%B4
웹눈이야기님 블로그 팁 보고 그누보드에 적용시켰습니다.

1. head.sub.php 파일에 jquery 파일 추가
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-1.4.2.min.js"></script>

2. 스타일 적용 - 해당 사이트에 맞게끔 수정하셔야 됩니다.
저같은 경우는 전체 div나 main div 에 position:relative; 속성 추가후 아래처럼 사용합니다.
<style type="text/css">
/* 서브페이지 우측 스크롤메뉴 */
#quickmenu_sub{position:absolute; right:-70px; top:10px; width:67px; height:120px; z-index:1}
#quickmenu_sub a img{vertical-align:middle;}
</style>

3. 적용하고 싶은 파일에 아래 코드 추가
<!-- ## right quick menu ## -->
<div id="quickmenu_sub">
스크롤 배너(메뉴) 내용
</div>

<!-- jquery use -->
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = parseInt($("#quickmenu_sub").css("top"));
$(window).scroll(function() {
var position = $(window).scrollTop(); // 현재 스크롤바의 위치값을 반환합니다.
$("#quickmenu_sub").stop().animate({"top":position+currentPosition+"px"},1000);
});
});
</script>
<!-- ## right quick menu ## -->

jQuery 적용하니 간단하고 좋네요~ㅎㅎ
파이어폭스, 크롬, ie8 정상 작동합니다.
|

댓글 9개

모니터 해상도에 따라서 변화하는 것은 어떻게 잡아주면 될까요.?
html 코드를 어떻게 작성하셨는지에 따라 틀립니다.
저같은 경우는
<body style="text-align:center;"><!-- ie가운데 정렬 -->
<div style="width:990px; margin:0 auto; text-align:left; position:relative;">
사이트 레이아웃 및 컨텐츠
<div id="quickmenu_sub">내용</div>
jquery 스크립트
</div>
</body>
주로 위와 같이 작성하구요.

#quickmenu_sub{position:absolute; right:-70px; top:10px; z-index:1} 은
상위div 기준으로 오른쪽에서 -70px 상단에서 10px 자리에 위치하게 됩니다.
오호 필요하던것
감사감사 잘되네요 T_T;
감사합니다 너무 잘됩니다
저 혹시 배너의 최대 높이와 최저 높이 설정은 어케 하나요?ㅠㅠ
최대높이와 최저높이는 어떤걸 말씀하시는건가요?
따라다니는 메뉴

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
번호 제목 글쓴이 날짜 조회
3309 3년 전 조회 2,009
3308 11년 전 조회 2,330
3307 6년 전 조회 5,019
3306 6년 전 조회 3,492
3305 6년 전 조회 1.3만
3304 7년 전 조회 3,973
3303 7년 전 조회 3,953
3302 7년 전 조회 1.4만
3301 8년 전 조회 5,098
3300 8년 전 조회 6,191
3299 8년 전 조회 1.1만
3298 8년 전 조회 4,232
3297 8년 전 조회 4,657
3296 8년 전 조회 1.2만
3295 8년 전 조회 1.5만
3294 8년 전 조회 6,242
3293 8년 전 조회 5,861
3292 9년 전 조회 5,514
3291 9년 전 조회 1.4만
3290 9년 전 조회 5,269
🐛 버그신고