{"id":1629,"date":"2019-07-11T00:37:55","date_gmt":"2019-07-10T16:37:55","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=1629"},"modified":"2019-07-13T15:05:20","modified_gmt":"2019-07-13T07:05:20","slug":"how-to-make-a-portion-of-your-sidebar-sticky-as-you-scroll-till-the-footer-of-your-web-page-with-jquery-and-some-css-styles","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-make-a-portion-of-your-sidebar-sticky-as-you-scroll-till-the-footer-of-your-web-page-with-jquery-and-some-css-styles\/","title":{"rendered":"How to make a portion of your sidebar sticky as you scroll till the footer of your web page with jQuery and some CSS styles"},"content":{"rendered":"

You want a portion of your sidebar to stick as you scroll down your web page.<\/p>\n

When you reach the footer of your web page, you want that portion to stop just above the footer of your web page.<\/p>\n

In this case, you can use jQuery to help you achieve this behaviour.<\/p>\n

Given that, this post shows how to make a portion of your sidebar sticky as you scroll till the footer of your web page with jQuery and some CSS styles.<\/p>\n

Setting up the HTML part of the equation<\/h2>\n

In order for jQuery to locate the sticky part of the content, define a HTML element that should contain the sticky content:<\/p>\n

\r\n<div id="sticky-sidebar">\r\n<p>The sticky content<\/p>\r\n<\/div>\r\n<\/pre>\n
In addition to that, define a HTML element just before the sticky portion. Given that, you should have HTML elements that look like the following:<\/p>\n
\r\n<div id="before-sticky-sidebar">\r\n<p>The non-sticky content<\/p>\r\n<\/div>\r\n<div id="sticky-sidebar">\r\n<p>The sticky content<\/p>\r\n<\/div>\r\n<\/pre>\n
Finally, define a HTML element that marks the section that the sticky portion stops being sticky. For example, we can define a footer section for such a purpose:<\/p>\n
\r\n<div id="main-footer">\r\n<!-- Footer content -->\r\n<\/div>\r\n<\/pre>\n
Setting up the CSS part of the equation<\/h2>\n
After setting up the HTML elements, define a style class to make the sticky portion stick.<\/p>\n
\r\n#sticky-sidebar.stick {\r\n\tposition: fixed;\r\n\tmax-width: 350px;\r\n}\r\n<\/pre>\n
In the above code, we define a style class that will keep the sticky portion in place. In addition to that, we also apply the max-width<\/code> property to keep children elements of the sticky portion to a maximum width. <\/p>\n
The JavaScript \/ jQuery code to make a portion of your sidebar sticky as you scroll till the footer of your web page<\/h2>\n
Once we have defined the CSS style class, we are ready to include the jQuery codes within our web page. <\/p>\n
\r\nfunction sticky_relocate() {\r\n\tvar window_top = jQuery(window).scrollTop();\r\n\tvar footer_top = jQuery("#main-footer").offset().top;\r\n\tvar div_top = jQuery('#before-sticky-sidebar').offset().top + jQuery('#before-sticky-sidebar').height();\r\n\tvar div_height = jQuery("#sticky-sidebar").height();\r\n\r\n\tvar padding = 20;  \r\n\r\n\tif (window_top + div_height > footer_top - padding) {\r\n\t\tjQuery('#sticky-sidebar').css({top: (window_top + div_height - footer_top + padding) * -1});\r\n\t}\r\n\telse if (window_top > div_top) {\r\n\t\tjQuery('#sticky-sidebar').addClass('stick');\r\n\t\tjQuery('#sticky-sidebar').css({top: 80});\r\n\t} else {\r\n\t\tjQuery('#sticky-sidebar').removeClass('stick');\r\n\t}\r\n}\r\n\r\njQuery(document).ready(function() {\r\n\tjQuery(window).scroll(sticky_relocate);\r\n\tsticky_relocate();\r\n});\r\n<\/pre>\n
So what does the jQuery \/ JavaScript code do?<\/p>\n
First, we define a function, sticky_relocate<\/code>, that will be called whenever the user scrolls the web page.<\/p>\n
At the start of sticky_relocate<\/code>, we first get some values for deciding the location of the sticky portion of the sidebar:<\/p>\n