반응형
이번 팁은 기존 고정된 광고 달기+화면 넓이에 따라 HIDE/SHOW 를 활용한 팁입니다.
우선 코드는 아래와 같습니다.
1, TOP이미지가 보여지는 부분
<div id='scrolltop' name="scrolltop">
<a href="#" class="top" onclick="window.scrollTo(0,0); return false;"><img src="./images/top.png" border="0" title="맨위로"></a>
</div>
<div id='scrolltop' name="scrolltop">
<a href="#" class="top" onclick="window.scrollTo(0,0); return false;"><img src="./images/top.png" border="0" title="맨위로"></a>
</div>
2, 화면길이에 따라 HIDE&SHOW를 해주는 스크립트
<script language="JavaScript">
<!--
var hightop = document.body.clientHeight;
if (hightop <= 2000){
document.getElementById('scrolltop').style.display = "none";
}
else if (hightop > 3000){
document.getElementById('scrolltop').style.display = "block";
}
//-->
</script>
<script language="JavaScript">
<!--
var hightop = document.body.clientHeight;
if (hightop <= 2000){
document.getElementById('scrolltop').style.display = "none";
}
else if (hightop > 3000){
document.getElementById('scrolltop').style.display = "block";
}
//-->
</script>
적용 방법은 먼저 TOP이미지로 쓸 이미지를 티스토리 스킨편집에 파일업로드를 통해
업로드 한후 적용하고 하는 위치에 1번 코드와 2번 코드를 같이 넣습니다.
그리고 2번코드에서 빨간색 부분을 자신이 나타내고자 하는 범위를 지정합니다.
저는 현재 2000px이하 일때는 숨기고 ,3000px 보다 길때 보여지도록 지정해
놓았습니다.
간단하죠?? 모르는 부분이 있으면 댓글 달아주시면 알려드릴게요^^
반응형
'티스토리' 카테고리의 다른 글
[티스토리팁]티스토리_다음 뷰ON 페이지하단에 고정시키기~! (4) | 2011.04.22 |
---|---|
[티스토리 팁]티스토리에 왼쪽 또는 오른쪽에 고정된 광고 달기+브라우저(페이지) 크기에 따른 노출 유무 적용 (5) | 2011.01.29 |
[마감]티스토리 초대장 4분께 나눠드립니다. (7) | 2010.07.16 |