그누보드 빌더사용중인데요..
오른쪽에 따라다니는 배너를 추가했습니다.
작동 참 잘되고 있고요~
근데 오른쪽 배너가 다른 메뉴를 클릭하면서 페이지가 바뀔때
잠깐 왼쪽 위에 붙어있다가 제자리를 찾아가서 오른쪽에 붙는데
이런 현상을 없앨 수 있을까요??
그누랑 구글링 엄청해대다가 도저히 안되서
상냥하신 고수님들의 답변을 기대하며 글남겨봅니다.ㅠㅠ
아래는 제가 사용한 소스입니다.
Copy
<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개 / 댓글 1개
채택된 답변
+20 포인트
2014-07-18 (금) 16:24:17
위치를 계산하는 시간이라기보다 페이지가 모두 열리고 난 후 위치를 설정해주기 때문입니다
사이트가 느릴 수록 더 심해지겠죠
<div id="floating" style="position:absolute;" > <-- 여기에 기본 값을 사이트에 맞게 넣어보세요
top:158px;
아니면 위 배너 태그 바로 다음에 자바스크립트가 곧바로 적용되게 넣으면 되는데...설명이 복잡해지니
그냥 style에 top값을 넣어서 만드세요
답변에 대한 댓글 1개
2014-07-18 (금) 16:44:37
2014-07-18 (금) 17:54:11
네이트온 [email protected] 입니다 ~!
답변을 작성하려면 로그인이 필요합니다.
div자체에 top값을 주니까 상단위치는 괜찮은데
왼쪽에 있다가 후딱 오른쪽으로 바뀌는건 그대로라서..ㅠㅠ
left값을 줘서 해봤더니 이제는 중간에서 오른쪽으로 후딱 가네요..ㅋㅋ
left값이든 뭐든 div스타일로 조정해가면서 수정해보도록 하겠습니다!!!
감사합니다~~^^