Suggested Videos
Part 49 - Optimize jquery progress bar
Part 50 - jquery show hide password
Part 51 - Increase decrease font size using jquery
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.
Part 49 - Optimize jquery progress bar
Part 50 - jquery show hide password
Part 51 - Increase decrease font size using jquery
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>
No comments:
Post a Comment
It would be great if you can help share these free resources