Summary
Keywords
Full Transcript
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/05/jquery-floating-div.html Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 In this video we will discuss, how to create floating div using jQuery. We want the div element in the sidebar to be floating and always visible as we scroll down the page. Example : In this example we are using position() and scrollTop() functions. The object returned by position() function has top and left properties, which can be used to know the current top and left positions (coordinates). We are using this function to find the top position of the div element that we want to keep floating as we scroll down. To get the current vertical position of the scroll bar, we are using scrollTop() function. As we scroll and when the current vertical position of the scroll bar becomes GREATER THAN the top position of the div element, then we want the div element to start floating. To do this set position style to fixed. A fixed position element is positioned relative to the browser window. So as you scroll down it will be floating in the browser window. If the current vertical position of the scroll bar becomes LESS THAN the top position of the div element, then we don't want the div element to float, so we set position style to relative. A relative position element is positioned relative to itself. So if you set position to relative and top to 0, it will continue to stay where it is without floating. <html> <head> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { var floatingDiv = $("#divfloating"); var floatingDivPosition = floatingDiv.position(); $(window).scroll(function () { var scrollPosition = $(window).scrollTop(); if (scrollPosition >= floatingDivPosition.top) { floatingDiv.css({ 'position': 'fixed', 'top' : 3 }); } else { floatingDiv.css({ 'position': 'relative', 'top' : 0 }); } }); }); </script> </head> <body style="font-family:Arial;"> <table align="center" border="1" style="border-collapse:collapse"> <tr> <td style="width:500px"> Main Page Content </td> <td style="width:150px; vertical-align:top"> Side panel content <br /><br /> <div id="divfloating" style="background-color:silver; width:150px; height:150px"> Floating Div - Keeps floating as you scroll down the page </div> </td> </tr> </table> </body> </html>
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
