슬라이드 메뉴바 스크롤따라 움직이게 도움 정보
슬라이드 메뉴바 스크롤따라 움직이게 도움
본문
http://sir.co.kr/bbs/tb.php/g4_skin/111843/01a46b6912a0d9728993c88a3e05b983
하단에 첨부한 코딩으로 조합하려 했으나 실패했습니다 도와주세효
<title>script.aculo.us sidebar</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/side-bar.js"></script>
<style>
/****************************************/
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: absolute;
width: auto;
height: auto;
top: 140px;
right:0px;
background-image:url(images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}
</style>
</head>
<body>
<div id="sideBar">
<a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar" /></a>
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>side<span>bar</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<style type="text/css">
body{
background:url(foo) fixed;
}
div#aside{
position:fixed;
left: 860px;
top: 20px;
_position:expression('absolute');
_left: expression(offsetParent.scrollLeft+860+'px');
_top: expression(offsetParent.scrollTop+20+'px');
}
</style>
<div id="aside">레이어</div>
<? for ($i = 0; $i < 100; $i++) { ?>
<p><?=$i?></p>
<? } ?>
하단에 첨부한 코딩으로 조합하려 했으나 실패했습니다 도와주세효
<title>script.aculo.us sidebar</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/side-bar.js"></script>
<style>
/****************************************/
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: absolute;
width: auto;
height: auto;
top: 140px;
right:0px;
background-image:url(images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}
</style>
</head>
<body>
<div id="sideBar">
<a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar" /></a>
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>side<span>bar</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<style type="text/css">
body{
background:url(foo) fixed;
}
div#aside{
position:fixed;
left: 860px;
top: 20px;
_position:expression('absolute');
_left: expression(offsetParent.scrollLeft+860+'px');
_top: expression(offsetParent.scrollTop+20+'px');
}
</style>
<div id="aside">레이어</div>
<? for ($i = 0; $i < 100; $i++) { ?>
<p><?=$i?></p>
<? } ?>
댓글 전체
스크롤바따라 움직이게는 보니깐 자바스크립트에서 충돌이 나는거 같더라구요.
고정을 시키시는게 어떨까 합니다. 효과는 똑같이 사이드바에 따라 움직이는거처럼 보이겠죠.
고정을 시키시는게 어떨까 합니다. 효과는 똑같이 사이드바에 따라 움직이는거처럼 보이겠죠.