오른쪽 따라다니는 배너 위치문의드려요..ㅠㅠ
본문
그누보드 빌더사용중인데요..
오른쪽에 따라다니는 배너를 추가했습니다.
작동 참 잘되고 있고요~
근데 오른쪽 배너가 다른 메뉴를 클릭하면서 페이지가 바뀔때
잠깐 왼쪽 위에 붙어있다가 제자리를 찾아가서 오른쪽에 붙는데
이런 현상을 없앨 수 있을까요??
그누랑 구글링 엄청해대다가 도저히 안되서
상냥하신 고수님들의 답변을 기대하며 글남겨봅니다.ㅠㅠ
아래는 제가 사용한 소스입니다.
<script>
$(document).ready(function(){
var $doc = $(document);
var position = 0;
var top = $doc.scrollTop(); //현재 스크롤바 위치
var screenSize = 0; // 화면크기
var halfScreenSize = 0; // 화면의 반
/*사용자 설정 값 시작*/
var pageWidth = 1000; // 페이지 폭, 단위:px
var leftOffet = 500; // 중앙에서의 폭(왼쪽 -, 오른쪽 +), 단위:px
var leftMargin = 909; // 페이지 폭보다 화면이 작을때 옵셋, 단위:px, leftOffet과 pageWidth의 반만큼 차이가 난다.
var speed = 1500; // 따라다닐 속도 : "slow", "normal", or "fast" or numeric(단위:msec)
var easing = 'swing'; // 따라다니는 방법 기본 두가지 linear, swing
var $layer = $('#floating'); // 레이어 셀렉팅
var layerTopOffset = 158; // 레이어 높이 상한선, 단위:px
$layer.css('z-index', 10); // 레이어 z-인덱스
/*사용자 설정 값 끝*/
//좌우 값을 설정하기 위한 함수
function resetXPosition()
{
$screenSize = $('body').width();// 화면크기
halfScreenSize = $screenSize/2;// 화면의 반
xPosition = halfScreenSize + leftOffet;
if ($screenSize < pageWidth)
xPosition = leftMargin;
$layer.css('left', xPosition);
}
// 스크롤 바를 내린 상태에서 리프레시 했을 경우를 위해
if (top > 0 )
$doc.scrollTop(layerTopOffset+top);
else
$doc.scrollTop(0);
// 최초 레이어가 있을 자리 세팅
$layer.css('top',layerTopOffset);
resetXPosition();
//윈도우 크기 변경 이벤트가 발생하면
$(window).resize(resetXPosition);
//스크롤이벤트가 발생하면
$(window).scroll(function(){
yPosition = $doc.scrollTop()+layerTopOffset;
$layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});
});
});
//레이어 HTML 마크업은 아주 간단하게. ID만 주는정도로 끝..(position:absolute는 줘야 합니다..)
</script>
<body topmargin="0" leftmargin="0" <?=isset($g4['body_script']) ? $g4['body_script'] : "";?>>
<div id="floating" style="position:absolute;" >
<a href="http://www.drymist.co.kr/catalogue" target="_blank"><img src="../images/catalo_banner.jpg" border=0></a>
</div>
이게 오른쪽 위치를 계산하는 시간이 필요해서 그런건지..
그누팁이나 다른 오른쪽 날개배너 소스를 다 갖다붙여서 테스트해봐도
이 현상은 다 동일하게 나타나는것 같아서요..ㅠㅠ
그럼 답변부탁드리겠습니다.
감사합니다~!!!
답변 2
위치를 계산하는 시간이라기보다 페이지가 모두 열리고 난 후 위치를 설정해주기 때문입니다
사이트가 느릴 수록 더 심해지겠죠
<div id="floating" style="position:absolute;" > <-- 여기에 기본 값을 사이트에 맞게 넣어보세요
top:158px;
아니면 위 배너 태그 바로 다음에 자바스크립트가 곧바로 적용되게 넣으면 되는데...설명이 복잡해지니
그냥 style에 top값을 넣어서 만드세요
아~~ 답변감사합니다!!
div자체에 top값을 주니까 상단위치는 괜찮은데
왼쪽에 있다가 후딱 오른쪽으로 바뀌는건 그대로라서..ㅠㅠ
left값을 줘서 해봤더니 이제는 중간에서 오른쪽으로 후딱 가네요..ㅋㅋ
left값이든 뭐든 div스타일로 조정해가면서 수정해보도록 하겠습니다!!!
감사합니다~~^^
네이트온 *** 개인정보보호를 위한 이메일주소 노출방지 *** 입니다 ~!
