Post
Ask Question

Floating div on Page Scroll Using JavaScript

Introduction

 
This article explains how to create a div that will float up and down when the page is scrolled.
 
You must have seen in many websites that some advertisements always float up and down whenever you scroll the page, you can also create containers such as that for your website that will hold the Advertisements and will help you to earn more.
 
If your web page has only one div then it is very easy to create such type of Advertisement Container by just making it's Position=Fixed but what to do when you are using more than one Div on the same page and you want your advertisement to work on the complete page, in other words on all divs? In that case, you can refer to this article since it will help you to create such type of Div Containers that will work on the complete page and not on the single Div.
 
Now for the procedure to create such types of containers.
 
Step 1
 
First of all, add a webpage to your Visual Studio application.
 
float div1.jpg
 
Now you need to add three divs to your Web Form, one of them will be applied to the complete web page and will work as parent div and the other two will be children of this parent div.
  1. <body>  
  2.     <div id="page-wrap">  
  3.         <div class="div" id="Div1">  
  4.         </div>  
  5.         <div class="div" id="Div2">  
  6.         </div>  
  7.     </div>  
  8. </body> 
You can use these two children divs for creating a form or displaying the information according to your site's requirements.
 
Step 2
 
Now you need to add one more div that will be the Container Div where advertisements are to be placed.
  1. <body>  
  2.     <div id="page-wrap">  
  3.         <div class="div" id="Div1">  
  4.         </div>  
  5.         <div class="div" id="Div2">  
  6.         </div>  
  7.     </div>  
  8.     <div id="floatDiv" class="child_div">  
  9.         <label style="color:black; font-size:14px;">Advertisement</label> "  
  10.     </div>  
  11. </body> 
Here "Float Div" is the Advertisement Div.
 
Step 3
 
Now you need to add some jQuery and some JavaScript to your web page head section.
 
You need to add two jQuery files to your application, in other words, "jquery-1.3.2.min.js" and "jquery.dimensions.js". You can find these files in the Zip File that I provided above. Provide the reference of these files in the head section of your application.
 
After passing the reference of jQuery files you need to add some JavaScript to your application that will help the Advertisement Div to float.
  1. <script src="jquery-1.3.2.min.js"></script>  
  2.     <script src="jquery.dimensions.js"></script>  
  3.     <script>  
  4.         var name = "#floatDiv";  
  5.         var menuYloc = null;  
  6.         $(document).ready(function () {  
  7.             menuYloc = parseInt($(name).css("top").substring(0, $(name).css("top").indexOf("px")))  
  8.             $(window).scroll(function () {  
  9.                 offset = menuYloc + $(document).scrollTop() + "px";  
  10.                 $(name).animate({ top: offset }, { duration: 500, queue: false });  
  11.             });  
  12.         });  
  13. </script> 
Step 4
 
Now you just need to add some style to this application so that everything can be seen properly.
  1. <style type="text/css">  
  2.         body {  
  3.             color: #ccc;  
  4.             font: 10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;  
  5.         }  
  6.    
  7.         #Div2 {  
  8.             height: 800px;  
  9.             width: 1600px;  
  10.             border: 1px solid black;  
  11.         }  
  12.         .div {  
  13.         }  
  14.    
  15.         .child_div {  
  16.         }  
  17.         #Div1 {  
  18.             height: 800px;  
  19.             width: 1600px;  
  20.             border: 1px solid black;  
  21.         }  
  22.         #floatDiv {  
  23.             position: absolute;  
  24.             top: 150px;  
  25.             left: 50%;  
  26.             margin-left: 235px;  
  27.             width: 100px;  
  28.             height: 250px;  
  29.             border: 1px solid black;  
  30.         }  
  31. </style> 
Now your application is ready to run so debug your application and check the output.
 
Output
 
When you debug your application you will get output like this:
 
float div2.jpg
 
Now when you scroll down you will see that your Advertisement Div is automatically floating down with you.
 
Div Animation.gif


Similar Articles