This tutorial will teach you to create sidebar elements that can be floated/fixed on their position when the page is scrolled. Also those elements follow the certain boundaries which makes the scrolling to stop on reaching the bottom of the page.
Before we could start you need to understand what we are trying to do here .You can get familiarize by seeing 9gag.com which has a special sidebar which you can notice that after scrolling down certain distance the sidebar boxes are fixed on the top. When viewed carefully the sidebar boxes are only started to float when the page reaches specific scrolling distance from the top. And also those fixed element position never overlays the footer of the page. Let us see how we are going to create such an effect using Jquery and CSS.
Make the sidebar float only on specific conditions
I am going to make the sidebar ads floating when the page is scrolled. Before that the following cases needs to be understood.
Scenario 1: Page is not scrolled
When the webpage is loaded the sidebar ad will get loaded and nothing needs to be changed here.
Scenario 2: when the page is scrolled down
When the page is scrolled down the position of the ad needs to be fixed when it reaches the top of the browser window.
Only now we need to float the element and not before.
Scenario 3: When the page is scrolled down up to footer.
Even after floating the sidebar Div element we need to look after it whether it has reached the footer border. We cannot scroll further once it reaches the footer.
Lets get started with the code.
1.Include the Jquery library in your html code.
2. Create a DIV element that needs to float when scrolled.
3.Create another DIV tag that acts as reference for the float to start.
This is just a reference tag which helps to fix the top position when the page is scrolled.
Include this at the top of the previous DIV. If this step looks complex you can always use the custom position method. For example if the DIV has to be fixed if the page is scrolled to 500px then you can use this custom position instead of the reference element.
4.Begin the jquery function
Jquery Scroll function detects the browser scroll and invokes the function defined.
var targetScroll = $('#ad_sidebar').position().top;
var currentScroll = $('html').scrollTop() || $('body').scrollTop();
var footertotop=$('#footer-widgets').position().top;
var adtobottom=$('#ad_sidebar').position().bottom;
5.Define the four javascript variables
targetscroll is the distance between the top of the window and the Div tag which we created on step 2.
Currentscroll is out current postion corresponding to top of the window.
Footertotop is the distance between footer and top of the window.
Adtobottom is the calculated for calculating bottom of the window
6.Apply CSS styles
if (currentScroll>600) {
$('#ad_sidebar').css({position:"fixed",top:"10px"});
} else {
if (currentScroll< =600) {
$('#ad_sidebar').css({position:"relative",top:""});
}
}
When the currentscroll variable reaches 600px we need to change the CSS style to “fixed”
Postion:fixed;
This will make the sidebar to float when crossing 600px. What happens when the user scrolls above? We need to remove the fixed css style to relative.
Position: relative;
7.Make the div stop when reaches end of page div
The scrolling me continue upto footer but we need to stop the float once reaching the footer position. For this reason we have pull the DIV elements top using negative margin.
$(window).scrollTop() + $(window).height()
This will give you the distance to the bottom the screen.
if ( $(window).scrollTop() + $(window).height() > footertotop) {
$('#ad_sidebar').css('margin-top', 0-difference);
}
else {
$('#ad_sidebar').css('margin-top', 0);}
});
Here we are using margin-top css style which pulls up the floating css elements upwards when the footer is reached.
That’s all a simple trick that made out sidebar elements floating when the page is scrolled also obeying the constraints like footer and top positions.
Complete code:
< div id = "floatboxanchor" > < /div>
This same logic can applied to floating nav bars at the top.
“difference” variable is missing