{"id":23706,"date":"2015-04-17T23:01:18","date_gmt":"2015-04-17T15:01:18","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23706"},"modified":"2022-08-06T21:19:19","modified_gmt":"2022-08-06T13:19:19","slug":"sticky-elements-jquery-plugins","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/","title":{"rendered":"15 jQuery Plugins To Make Smart Sticky Elements"},"content":{"rendered":"<p>It is now common to see certain elements in a site fixed to a position when you scroll up or down the site e.g. the navigation menu, the header or the sidebar. This allows for the element to be readily available regardless of the user\u2019s position.<\/p>\n<p>Called a sticky element, this can be achieved just by <a href=\"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/\">using CSS<\/a>, however, using this method, the effect is not reliable across multiple browsers. That is why we\u2019ve put together a handful of JS libraries and jQuery plugins that will allow you to achieve this particular UX design with little to no hassle.<\/p>\n<h2>1. <a href=\"http:\/\/imakewebthings.com\/waypoints\/\" target=\"_blank\" rel=\"noopener\">Waypoints<\/a><\/h2>\n<p>Waypoints is a library to execute a function based on the element position in the viewport. It <a href=\"http:\/\/imakewebthings.com\/waypoints\/shortcuts\/sticky-elements\/\" target=\"_blank\" rel=\"noopener\">comes with an shortcut function <\/a>that makes that element \u201csticky\u201d. You can customize the scrolling direction \u2014 <code>up<\/code>, <code>down<\/code>, and even <code>right<\/code> and <code>left<\/code> \u2014 as to which the element should stick within the viewport.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: None \/ jQuery (optional)<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<figure><a href=\"http:\/\/imakewebthings.com\/waypoints\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-waypoints.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>\n<h2>2. <a href=\"https:\/\/github.com\/leafo\/sticky-kit\" target=\"_blank\" rel=\"noopener\">Sticky Kit<\/a><\/h2>\n<p>With <strong>StickyKit<\/strong>, not only can you make an element stick within the viewport, but you can also make them stick within the parent element you designate to multiple elements at once. The plugin also comes with <a href=\"https:\/\/leafo.net\/sticky-kit\/#reference\" rel=\"external nofolow\">some advanced settings<\/a> including custom Events and Triggers.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: <a href=\"http:\/\/www.wtfpl.net\/about\/\" target=\"_blank\" rel=\"noopener\">WTFPL<\/a><\/li>\n<\/ul>\n<figure><a href=\"https:\/\/github.com\/leafo\/sticky-kit\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-stickykit.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>\n<h2>3. <a href=\"http:\/\/stickyjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\">StickyJS<\/a><\/h2>\n<p><strong>StickyJS<\/strong> is an easy-to-use jQuery sticky plugin that does what it says. The plugin works out of the box. Yet, if you need some customization, it comes with Options\/Settings, Custom Methods and Events.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<figure><a href=\"http:\/\/stickyjs.com\/\" rel=\"nofollow\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-stickyjs.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>\n<h2>4. <a href=\"https:\/\/wicky.nillia.ms\/headroom.js\/\" target=\"_blank\" rel=\"noopener\">HeadRoom<\/a><\/h2>\n<p>A sticky site header will take up valuable vertical space that makes a difference when you view the site on mobile. <strong>Headroom<\/strong> is a JavaScript library that will make your sticky header smart; the header will be hidden when users scroll down the page and show up upon scrolling up.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: None \/ jQuery (optional) \/ Angular (optional)<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/wicky.nillia.ms\/headroom.js\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-headroom.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>\n<h2>5. <a href=\"https:\/\/github.com\/guimadaleno\/makefixed.js\" target=\"_blank\" rel=\"noopener nofollow\">MakefixedJS<\/a><\/h2>\n<p><strong>Makefixed<\/strong> lets you make elements be fixed dynamically as users scroll the page.  Just call the <code>makeFixed()<\/code> function on the element you want fixed. Check the <a href=\"https:\/\/guimadaleno.github.io\/demos\/makefixed.js\/demo.html\" rel=\"nofollow\">demo<\/a> to see it on action.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: GPL<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/github.com\/guimadaleno\/makefixed.js\" rel=\"nofollow\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-makefixed.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>\n<h2>6. <a href=\"https:\/\/aerolab.github.io\/midnight.js\/\" target=\"_blank\" rel=\"noopener\">MidnightJS<\/a><\/h2>\n<p><strong>Midnight<\/strong> allows you to stick multiple headers \/ elements and switch between them based on their position within the document (DOM tree), check out the <a href=\"https:\/\/aerolab.github.io\/midnight.js\/\">demo<\/a> to see what I mean. In addition you can change their color on the fly simply by adding the <code>data-midnight<\/code> attribute with the specified color name.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/aerolab.github.io\/midnight.js\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-midnightjs.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>\n<h2>7. <a href=\"http:\/\/scrollmagic.io\/\">ScrollMagic<\/a><\/h2>\n<p><strong>ScrollMagic<\/strong> has advanced features to add interaction, during a page scroll. You can pin elements from specific scroll positions, add animation based on scroll position, or even make an awesome parallax effect. The <a href=\"http:\/\/scrollmagic.io\/examples\/index.html\">demo<\/a> gives you some insights of what this plugin can do.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery \/ Velocity.js<\/li>\n<li><strong>License<\/strong>: Dual License (MIT and GPL)<\/li>\n<\/ul>\n<figure><a href=\"http:\/\/scrollmagic.io\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-scrollmagic.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>\n<h2>8. <a href=\"https:\/\/silvestreh.github.io\/onScreen\/\" target=\"_blank\" rel=\"noopener\">onScreen<\/a><\/h2>\n<p><strong>onScreen<\/strong> is similar to Waypoints \u2014 it allows you to execute functions as the element is entering, leaving, or reaching certain positions within the browser viewport.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/silvestreh.github.io\/onScreen\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-onscreen.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>\n<h2>9. <a href=\"https:\/\/webpop.github.io\/jquery.pin\/\" target=\"_blank\" rel=\"noopener\">jQuery Pin<\/a><\/h2>\n<p><strong>jQuery Pin<\/strong> is a small jQuery plugin to \u201cpin\u201d or \u201cunpin\u201d elements to a position, when you scroll the page. My most favorite part of this plugin is the option to disable it at certain viewport widths.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: <a href=\"https:\/\/en.wikipedia.org\/wiki\/BSD_licenses\" target=\"_blank\" rel=\"noopener\">BSD license<\/a><\/li>\n<\/ul>\n<figure><a href=\"https:\/\/webpop.github.io\/jquery.pin\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-jquerypin.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>\n<h2>10. <a href=\"https:\/\/github.com\/yairEO\/stickyfloat\" target=\"_blank\" rel=\"noopener\">Sticky Float<\/a><\/h2>\n<p><strong>Sticky Float<\/strong> allows us to give elements a fixed position that is relative to its parent. You can set the sticky option according to your needs with the provided parameters and by changing the value. Catch the demo <a href=\"https:\/\/github.com\/yairEO\/stickyfloat\">here<\/a>.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: <em>Undefined<\/em><\/li>\n<\/ul>\n<figure><a href=\"https:\/\/github.com\/yairEO\/stickyfloat\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-stickyfloat.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>\n<h2>11. <a href=\"https:\/\/github.com\/stefangabos\/Zebra_Pin\" target=\"_blank\" rel=\"noopener\">Zebra Pin<\/a><\/h2>\n<p><strong>Zebra Pin<\/strong> is a lightweight plugin to make any element pin to their container. With this plugin you can add \u201csticky-ness\u201d to elements in your project like to your navigation, sidebars, headers and footers, or other elements that you want to keep visible when users scroll down. Check out the <a href=\"http:\/\/stefangabos.ro\/wp-content\/demos\/Zebra_Pin\/examples\/\">demo<\/a>.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: GPL license<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-zebrapin.jpg\" width=\"700\" height=\"380\"><\/figure>\n<h2>12. <a href=\"https:\/\/github.com\/somewebmedia\/hc-sticky\" target=\"_blank\" rel=\"noopener\">HC-Sticky<\/a><\/h2>\n<p>With <strong>HC-Sticky<\/strong>, you can make sticky elements that refer to its container, to any given element, or  to the document itself. This plugin has some options that you can adjust to your need, like distance from the top and bottom to start floating, and other options.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/github.com\/somewebmedia\/hc-sticky\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-hcsticky.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>\n<h2>13. <a href=\"https:\/\/mojotech.github.io\/stickymojo\/\" target=\"_blank\" rel=\"noopener\">Sticky Mojo<\/a><\/h2>\n<p><strong>Sticky Mojo<\/strong> is a lightweight, fast, and flexible jQuery plugin to make awesome sticky elements. It\u2019s compatible with modern browsers and will degrade gracefully in IE.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/mojotech.github.io\/stickymojo\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-mojo.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>\n<h2>14. <a href=\"https:\/\/www.jozefbutko.com\/stickynavbar\/\" target=\"_blank\" rel=\"noopener\">Sticky Navbar<\/a><\/h2>\n<p>If you want make single page navigation which sticks when one scrolls down, this library is for you.<strong>Sticky Navbar<\/strong> will put the navigation at the top of the browser window and highlight the anchor link to connect to the corresponding section on your page. You can also add <a href=\"https:\/\/daneden.github.io\/animate.css\/\">Animate.css<\/a> to beautify the navigation effect.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: MIT license<\/li>\n<\/ul>\n<figure><a href=\"https:\/\/www.jozefbutko.com\/stickynavbar\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-navbar.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>\n<h2>15. <a href=\"https:\/\/github.com\/mike-zarandona\/StickyStack.js\" target=\"_blank\" rel=\"noopener\">StickyStack<\/a><\/h2>\n<p><strong>StickyStack<\/strong> will make elements stack with another when users scroll the element and reach the top of the viewport. With this library, your long page will transform into stacked cards.<\/p>\n<ul>\n<li><strong>Dependency<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: <em>Undefined<\/em><\/li>\n<\/ul>\n<figure><a href=\"https:\/\/github.com\/mike-zarandona\/StickyStack.js\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-stickystack.jpg\" width=\"700\" height=\"380\"><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>It is now common to see certain elements in a site fixed to a position when you scroll up or down the site e.g. the navigation menu, the header or the sidebar. This allows for the element to be readily available regardless of the user\u2019s position. Called a sticky element, this can be achieved just&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[4117,911],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>15 jQuery Plugins To Make Smart Sticky Elements - Hongkiat<\/title>\n<meta name=\"description\" content=\"It is now common to see certain elements in a site fixed to a position when you scroll up or down the site e.g. the navigation menu, the header or the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"15 jQuery Plugins To Make Smart Sticky Elements\" \/>\n<meta property=\"og:description\" content=\"It is now common to see certain elements in a site fixed to a position when you scroll up or down the site e.g. the navigation menu, the header or the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-17T15:01:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-06T13:19:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-waypoints.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sticky-elements-jquery-plugins\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sticky-elements-jquery-plugins\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"15 jQuery Plugins To Make Smart Sticky Elements\",\"datePublished\":\"2015-04-17T15:01:18+00:00\",\"dateModified\":\"2022-08-06T13:19:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sticky-elements-jquery-plugins\\\/\"},\"wordCount\":825,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sticky-elements-jquery-plugins\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sticky-elements-jquery-plugins\\\/sticky-waypoints.jpg\",\"keywords\":[\"Javascripts\",\"jQuery\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sticky-elements-jquery-plugins\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sticky-elements-jquery-plugins\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sticky-elements-jquery-plugins\\\/\",\"name\":\"15 jQuery Plugins To Make Smart Sticky Elements - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sticky-elements-jquery-plugins\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sticky-elements-jquery-plugins\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sticky-elements-jquery-plugins\\\/sticky-waypoints.jpg\",\"datePublished\":\"2015-04-17T15:01:18+00:00\",\"dateModified\":\"2022-08-06T13:19:19+00:00\",\"description\":\"It is now common to see certain elements in a site fixed to a position when you scroll up or down the site e.g. the navigation menu, the header or the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sticky-elements-jquery-plugins\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sticky-elements-jquery-plugins\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sticky-elements-jquery-plugins\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sticky-elements-jquery-plugins\\\/sticky-waypoints.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/sticky-elements-jquery-plugins\\\/sticky-waypoints.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/sticky-elements-jquery-plugins\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"15 jQuery Plugins To Make Smart Sticky Elements\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"15 jQuery Plugins To Make Smart Sticky Elements - Hongkiat","description":"It is now common to see certain elements in a site fixed to a position when you scroll up or down the site e.g. the navigation menu, the header or the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/","og_locale":"en_US","og_type":"article","og_title":"15 jQuery Plugins To Make Smart Sticky Elements","og_description":"It is now common to see certain elements in a site fixed to a position when you scroll up or down the site e.g. the navigation menu, the header or the","og_url":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-04-17T15:01:18+00:00","article_modified_time":"2022-08-06T13:19:19+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-waypoints.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"15 jQuery Plugins To Make Smart Sticky Elements","datePublished":"2015-04-17T15:01:18+00:00","dateModified":"2022-08-06T13:19:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/"},"wordCount":825,"commentCount":9,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-waypoints.jpg","keywords":["Javascripts","jQuery"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/","url":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/","name":"15 jQuery Plugins To Make Smart Sticky Elements - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-waypoints.jpg","datePublished":"2015-04-17T15:01:18+00:00","dateModified":"2022-08-06T13:19:19+00:00","description":"It is now common to see certain elements in a site fixed to a position when you scroll up or down the site e.g. the navigation menu, the header or the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-waypoints.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/sticky-elements-jquery-plugins\/sticky-waypoints.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/sticky-elements-jquery-plugins\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"15 jQuery Plugins To Make Smart Sticky Elements"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6am","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23706"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23706\/revisions"}],"predecessor-version":[{"id":61238,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23706\/revisions\/61238"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23706"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}