스크롤 메뉴 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와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3249 |
|
11년 전 | 6321 | |
| 3248 | 11년 전 | 6072 | ||
| 3247 |
|
11년 전 | 5430 | |
| 3246 | 11년 전 | 7161 | ||
| 3245 | 11년 전 | 4553 | ||
| 3244 | 11년 전 | 5215 | ||
| 3243 | 11년 전 | 5667 | ||
| 3242 |
|
11년 전 | 6508 | |
| 3241 |
saintbe
|
11년 전 | 5652 | |
| 3240 |
|
11년 전 | 5375 | |
| 3239 |
|
11년 전 | 3942 | |
| 3238 |
sahara
|
11년 전 | 5113 | |
| 3237 |
커네드커네드
|
11년 전 | 4659 | |
| 3236 |
|
11년 전 | 6914 | |
| 3235 |
사노라가노라
|
11년 전 | 3966 | |
| 3234 | 11년 전 | 4766 | ||
| 3233 | 11년 전 | 7908 | ||
| 3232 | 11년 전 | 8205 | ||
| 3231 | 11년 전 | 4982 | ||
| 3230 |
다케미카코
|
11년 전 | 5995 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기