스크롤 메뉴 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 정상 작동합니다.
먼저
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개
13년 전
모니터 해상도에 따라서 변화하는 것은 어떻게 잡아주면 될까요.?
13년 전
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 자리에 위치하게 됩니다.
저같은 경우는
<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 자리에 위치하게 됩니다.
13년 전
오호 필요하던것
13년 전
감사합니다!!!
12년 전
감사감사 잘되네요 T_T;
11년 전
감사합니다 너무 잘됩니다
WebNerd
11년 전
저 혹시 배너의 최대 높이와 최저 높이 설정은 어케 하나요?ㅠㅠ
11년 전
최대높이와 최저높이는 어떤걸 말씀하시는건가요?
studyhaza
9년 전
따라다니는 메뉴
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3189 |
|
11년 전 | 6697 | |
| 3188 | 11년 전 | 4367 | ||
| 3187 | 11년 전 | 5643 | ||
| 3186 | 12년 전 | 5230 | ||
| 3185 | 12년 전 | 4847 | ||
| 3184 | 12년 전 | 4810 | ||
| 3183 | 12년 전 | 3865 | ||
| 3182 | 12년 전 | 6994 | ||
| 3181 |
skpal
|
12년 전 | 6371 | |
| 3180 | 12년 전 | 5739 | ||
| 3179 | 12년 전 | 5180 | ||
| 3178 | 12년 전 | 4027 | ||
| 3177 |
soul5932
|
12년 전 | 6472 | |
| 3176 |
다케미카코
|
12년 전 | 3734 | |
| 3175 |
soul5932
|
12년 전 | 12913 | |
| 3174 | 12년 전 | 11138 | ||
| 3173 | 12년 전 | 5298 | ||
| 3172 | 12년 전 | 6045 | ||
| 3171 | 12년 전 | 5499 | ||
| 3170 | 12년 전 | 5481 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기