Youtor
jquery floating div
>> YOUR LINK HERE: ___ http://youtube.com/watch?v=H9FPOJduvts
Link for all dot net and sql server video tutorial playlists • https://www.youtube.com/user/kudvenka... • Link for slides, code samples and text version of the video • http://csharp-video-tutorials.blogspo... • 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. • / @aarvikitchen5572 • 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. • lt;html gt; • lt;head gt; • lt;script src= jquery-1.11.2.js gt; lt;/script gt; • lt;script type= text/javascript gt; • $(document).ready(function () { • var floatingDiv = $( #divfloating ); • var floatingDivPosition = floatingDiv.position(); • $(window).scroll(function () { • var scrollPosition = $(window).scrollTop(); • if (scrollPosition gt;= floatingDivPosition.top) { • floatingDiv.css({ • 'position': 'fixed', • 'top' : 3 • }); • } else { • floatingDiv.css({ • 'position': 'relative', • 'top' : 0 • }); • } • }); • }); • lt;/script gt; • lt;/head gt; • lt;body style= font-family:Arial; gt; • lt;table align= center border= 1 style= border-collapse:collapse gt; • lt;tr gt; • lt;td style= width:500px gt; • Main Page Content • lt;/td gt; • lt;td style= width:150px; vertical-align:top gt; • Side panel content • lt;br / gt; lt;br / gt; • lt;div id= divfloating style= background-color:silver; width:150px; height:150px gt; • Floating Div - Keeps floating as you scroll down the page • lt;/div gt; • lt;/td gt; • lt;/tr gt; • lt;/table gt; • lt;/body gt; • lt;/html gt;
#############################
