How can I put my slide div on the right top of page when scrolling vertical bar here is Css my code
CSS
<style>
body {
width:100%;
overflow-x:hidden;
margin:0;
}
#slide {
background:rgba(0,0,0,0.4);
width: 200px;
float: right;
margin-right: -180px;
}
p {
color: red;
margin: 5px;
cursor: pointer;
float: right;
min-height: 200%;
}
p:hover {
background: yellow;
}
</style>
Here is my HTML code HTML
<body>
<b>Jscript Animate Example</b>
<div id="slide">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
</body>
my Jquery code Jquery
<script>
var menu = 0;
$("#slide").click(function() {
if (menu == 0) {
menu = 1;
$(this).animate(
{marginRight: '0px'},200
);
} else {
menu = 0;
$(this).animate(
{marginRight: '-180px'},200
);
}
});
</script>
but when i scroll down, it moves on top.how can i fix it on top even i scrolling down.
您是否尝试过给它固定的位置以及上,右坐标?
try this
#slide {
background:rgba(0,0,0,0.4);
width: 200px;
top: 0;
right: 0;
border: 1px solid #000000;
position: absolute;
}
you can check it on http://jsfiddle.net/jU5YW/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.