스크롤 메뉴 jQuery 적용 정보
스크롤 메뉴 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 정상 작동합니다.
추천
2
2
댓글 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 자리에 위치하게 됩니다.
저같은 경우는
<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;
감사합니다 너무 잘됩니다
저 혹시 배너의 최대 높이와 최저 높이 설정은 어케 하나요?ㅠㅠ
최대높이와 최저높이는 어떤걸 말씀하시는건가요?
따라다니는 메뉴