Please can someone help me fix this code? Its doesn't seem to make the desired div stick to top of page: the code is shown below.
i need figuring out wrong code below:
<!doctype html>
<html>
<head>
<title></title>
<style>
*{
margin:0;
padding:0;
}
#sticky {
width: 600px;
background-color: #000;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 3px;
}
#sticky.stick {
position:fixed;
top:0;
z-index: 10000;
}
#sticky-anchor {
height:0;
}
#wrapper{
width:600px;
margin:0 auto;
padding:0;
}
#header{
width:600px;
height:140px;
margin:0 auto;
}
#content{
display:block;
height:800px;
width:600px;
background-color:pink;
}
</style>
</head>
<body>
<script>
function sticky_relocate() {
var window_top = $(window).scrolltop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addclass('stick');
} else {
$('#sticky').removeclass('stick');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
<div id="wrapper">
<div id="header"><h1>welcome</h1></div>
<div id="sticky-anchor"></div>
<div id="sticky">this stay @ top of page</div>
<div id="content"></div>
</div>
</body>
</html>
nothing wrong (aside couple of issues in regards coding practices). merely need link jquery library.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment