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>

Comments

Popular posts from this blog

Text Smooth Scrolling Marquee use jQuery