Procedure:
1# First You should know the Widget's ID, the simplest way to do it is:
- Open Widget to edit it. This edit button is shown right at down-right corner. Click it to open the edit-widget.
- Now there will be a new opened window of your browser [may be different].
- Just in the address bar, at the end, see the Widget's ID. Normally it is HTML1, HTML2 and so on. [See screenshot below]
2# Now, Go to Template>Edit HTML.
3# Press Ctrl+F to find something [you must choose the template-edit box by clicking it, first]. Write something like:
</body>
Hit Enter to find the above piece.
4# Now, just above it. Copy and paste the following text:
<script>
//<![CDATA[
bs_makeSticky("YOUR_WIDGET_ID"); // enter your widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>
5# Just replace YOUR_WIDGET_ID with your original ID [like HTML1, HTML2....] [See Screenshot Below]
6# Now, your widget will be stick to the scroll, and will move with the scroll....Enjoy and don't forget to share.
3# Press Ctrl+F to find something [you must choose the template-edit box by clicking it, first]. Write something like:
</body>
Hit Enter to find the above piece.
4# Now, just above it. Copy and paste the following text:
<script>
//<![CDATA[
bs_makeSticky("YOUR_WIDGET_ID"); // enter your widget ID here
function bs_makeSticky(elem) {
var bs_sticky = document.getElementById(elem);
var scrollee = document.createElement("div");
bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
var width = bs_sticky.offsetWidth;
var iniClass = bs_sticky.className + ' bs_sticky';
window.addEventListener('scroll', bs_sticking, false);
function bs_sticking() {
var rect = scrollee.getBoundingClientRect();
if (rect.top < 0) {
bs_sticky.className = iniClass + ' bs_sticking';
bs_sticky.style.width = width + "px";
} else {
bs_sticky.className = iniClass;
}
}
}
//]]>
</script>
<style>
.bs_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>
5# Just replace YOUR_WIDGET_ID with your original ID [like HTML1, HTML2....] [See Screenshot Below]
6# Now, your widget will be stick to the scroll, and will move with the scroll....Enjoy and don't forget to share.
.
