Trying to fix a div container dynamically can be a real pain for developers. The CSS only solution doesn’t offer enough flexibility for it to be used in real world situations, so the only way to go is to create a Javascript to calculate the position and place them dynamically. Even then, it can still be overwhelming.
I’ve decided to create a super simple to use script that will let you fix any div container to the viewport with only one line of JS call. How did I do it? Let’s dive into the logic of this plugin.
Note: This plugin has been tested on Chrome, Firefox, Safari and IE10.
[tut demo=”https://onextrapixel.com/examples/fix-any-div-container-into-view-port” download=”https://onextrapixel.com/examples/fix-any-div-container-into-view-port/fix-any-div-container-into-view-port.zip”]
How to Use AutoFix_Anything.js
How does this work?
The plugin consists of a bunch of calculations in order to automatically detect when to fix/unfix a container. Basically, on launch, the plugin will get the current position of the container and calculate how far the container is from the top of the page and where it ends in relation to the height of the document.
The plugin will then fix the container only when the user scrolls within this range. The way the plugin fixes the container is simple. I used CSS in order to make the plugin slim and easily maintained, plus using CSS gives us the ability to modify the behaviour much better than using JS. Since there are times when you will need more than one container to be fixed, I decided to make the script to be compatible with multiple instances.
How-Tos
Start off by including the latest jQuery plugin available here, the jQuery.autofix_anything.js and the autofix_anything.css, which can be found here, into your document’s . Now all you have to do is choose the container you wish to be fixed in the viewport when scrolling and call the function as follows:
JS:
$(".sidebar").autofix_anything();
HTML (optional)
<div class="wrapper"> .. <div class="sidebar">..</div> .. </div>
Although the HTML structure above isn’t mandatory, by having it laid out like this, there is more chance that the plugin will work right out of the box for you. The wrapper is important for the plugin to determine when to fix or release the container.
And that’s it! Yup, it’s that easy. Now your container with a class “sidebar” will be fixed when the user scrolls within the area of the “sidebar” parent container and it will be released automatically when the user scrolls passed it.
Customization
JS:
$(".sidebar").autofix_anything({
customOffset: false,
manual: false, // Toggle this to true if you wish to manually fix containers with the public method. Default value is false
onlyInContainer: true // Set this to false if you don't want the fixed container to limit itself to the parent's container.
});
To customize how the plugin behaves, all you need to do is to change the following options as you see fit:
- customOffset: This option lets you define custom offset for the container to be fixed. The option accepts pixels as the value. For example, if you want the container to be fixed when the user scrolls past 200 pixels, simple set this option to 200. The default value is “false” which will make the plugin automatically fix the container when the it is in the viewport for you.
- manual: Toggle this to “true” if you wish to manually fix the container with the public method (more info below). Default value is “false”
- onlyInContainer: This plugin automatically prevents the container from following you when it reaches the end of the parent container. To turn this off, simply set this option to “false”. The default value is “true”.
Public Method
The plugin is made by a developer for developers so the public method is a must.
$.fn.manualfix()
With the above method, you can fix/release a container programmatically. Make sure that you toggle the “manual” option to “true” before using the method:
JS:
$(".sidebar").autofix_anything({
manual: true
});
and then you can call this method anywhere you like and the plugin will determine whether to fix/release based on the current state.
JS:
$(".sidebar").manualfix()
[tut demo=”https://onextrapixel.com/examples/fix-any-div-container-into-view-port” download=”https://onextrapixel.com/examples/fix-any-div-container-into-view-port/fix-any-div-container-into-view-port.zip”]
Conclusion
And that’s it for today’s free plugin and tutorial. What do you think? Will you be using this plugin on your upcoming project? Let us know in the comments below. Also, if you have any suggestions on plugin ideas, feel free to hit me up on Twitter or list them below.
