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