MAKE A DIV STICK WHEN SCROLL
All time top your div to scrolling. Make and use your website for HTML or WordPress.
You Most calling Jquery plugin an flow bottom codex.
--------------------------
HTML
--------------------------
<div id="wrapper">
<div id="mainContent">
<!--Content for your main div - like a blog post-->
</div>
<div id="sideBar">
<!--Some content in your right column/sidebar-->
<div id="sticker">...start scrolling to watch me stick</div>
</div>
<div class="clear"></div>
</div>
----------------------------
CSS
----------------------------
div#wrapper {
margin:0 auto;
width:900px;
background:#FFF;
}
div#mainContent {
width:560px;
padding:20px;
float:left;
}
div#sideBar {
width:230px;
padding:20px;
margin-left:30px;
float:left;
}
.clear {
clear:both;
}
div#sticker {
padding:20px;
margin:20px 0;
background:#AAA;
width:190px;
}
.stick {
position:fixed;
top:0px;
}
------------------------------
jQuery
------------------------------
<script type="text/javascript"> //DIV STICK SCROLL
$(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
</script>
You Most calling Jquery plugin an flow bottom codex.
--------------------------
HTML
--------------------------
<div id="wrapper">
<div id="mainContent">
<!--Content for your main div - like a blog post-->
</div>
<div id="sideBar">
<!--Some content in your right column/sidebar-->
<div id="sticker">...start scrolling to watch me stick</div>
</div>
<div class="clear"></div>
</div>
----------------------------
CSS
----------------------------
div#wrapper {
margin:0 auto;
width:900px;
background:#FFF;
}
div#mainContent {
width:560px;
padding:20px;
float:left;
}
div#sideBar {
width:230px;
padding:20px;
margin-left:30px;
float:left;
}
.clear {
clear:both;
}
div#sticker {
padding:20px;
margin:20px 0;
background:#AAA;
width:190px;
}
.stick {
position:fixed;
top:0px;
}
------------------------------
jQuery
------------------------------
<script type="text/javascript"> //DIV STICK SCROLL
$(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
</script>
Comments
Post a Comment