{"id":16798,"date":"2013-04-01T21:01:46","date_gmt":"2013-04-01T13:01:46","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16798"},"modified":"2025-04-24T17:14:57","modified_gmt":"2025-04-24T09:14:57","slug":"css-sticky-position","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/","title":{"rendered":"Sticky Position (Bar) with CSS or jQuery"},"content":{"rendered":"<p>The idea of \u2018sticky position\u2019 is to make elements on a website <strong>stick and remain visible<\/strong>. These elements will initially be in their designated position, and when scrolling down the webpage, they will follow the scroll.<\/p>\n<p>Facebook applies this technique to its sidebar; when you scroll down the page, the sidebar follows the scroll, remaining visible.<\/p>\n<p>Historically, this effect was achieved using JavaScript or jQuery, as shown below.<\/p>\n<h2>The jQuery Way<\/h2>\n<p>In this example, we\u2019ll create a simple webpage consisting of a header, navigation, and content area.<\/p>\n<pre>\n&lt;div class=\"wrapper\"&gt;\n    &lt;div class=\"header\"&gt;\n        Header\n    &lt;\/div&gt;\n    &lt;div class=\"nav\"&gt;\n        Navigation\n    &lt;\/div&gt;\n    &lt;div class=\"content\"&gt;\n        &lt;p&gt;Candy canes tart pie biscuit. Cupcake liquorice cake dessert tootsie roll\n        applicake pastry. ...&lt;\/p&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<p>We will apply the sticky position to the navigation element.<\/p>\n<p>First, let\u2019s define the necessary styles in the stylesheet:<\/p>\n<pre>\n.sticky {\n    position: fixed;\n    width: 100%;\n    left: 0;\n    top: 0;\n    z-index: 100;\n    border-top: 0;\n}\n<\/pre>\n<p>Then, we\u2019ll conditionally apply this class to the navigation using jQuery.<\/p>\n<pre>\n$(document).ready(function() {\n    var stickyNavTop = $('.nav').offset().top;\n\n    var stickyNav = function(){\n        var scrollTop = $(window).scrollTop();\n\n        if (scrollTop &gt; stickyNavTop) {\n            $('.nav').addClass('sticky');\n        } else {\n            $('.nav').removeClass('sticky');\n        }\n    };\n\n    stickyNav();\n\n    $(window).scroll(function() {\n        stickyNav();\n    });\n});\n<\/pre>\n<p>You can view the demo via the link below.<\/p>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/css-sticky-position\/\">View Demo<\/a>\n<\/div>\n<p>This method might seem a bit complex for those unfamiliar with jQuery. Alternatively, you can achieve the same effect more easily using a jQuery plugin like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/bigspotteddog\/ScrollToFixed\">ScrollToFixed<\/a>. Otherwise, let\u2019s explore the CSS approach.<\/p>\n<h2>The CSS Way<\/h2>\n<p>Recently, WebKit introduced a new position value called <code>sticky<\/code>, which achieves the same result as the jQuery code. However, as <code>sticky<\/code> is still considered an <strong>experimental feature<\/strong>, you need to enable it first.<\/p>\n<p>If you\u2019re using Chrome version 23 or later, type <code>chrome:\/\/flags<\/code> into the address bar. Otherwise, you\u2019ll need to update Chrome first.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Chrome flags settings page\" height=\"366\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-sticky-position\/chrome-flags.jpg\" width=\"500\"><\/figure>\n<p>Then, find the <strong>Enable experimental WebKit features<\/strong> option on the list and set it to <strong>Enable<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Enable experimental WebKit features\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-sticky-position\/experimental-feature.jpg\" width=\"500\"><\/figure>\n<p>In the stylesheet, simply set the navigation\u2019s <strong>position to sticky<\/strong>. Since it\u2019s currently only available in WebKit, you\u2019ll need the vendor prefix:<\/p>\n<pre>\n.nav {\n    position: -webkit-sticky;\n    top: 0;\n    z-index: 1;\n}\n<\/pre>\n<p>The navigation should now behave the same way as the jQuery version. View the demo below in a compatible browser (like older Chrome versions or Safari) to see it in action.<\/p>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/css-sticky-position\/\">View Demo<\/a>\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/css-sticky-position\/\">Download Source<\/a>\n<\/div>\n<p>However, as mentioned, this feature was experimental and required vendor prefixes. Modern browsers now widely support <code>position: sticky<\/code> without prefixes.<\/p>","protected":false},"excerpt":{"rendered":"<p>The idea of \u2018sticky position\u2019 is to make elements on a website stick and remain visible. These elements will initially be in their designated position, and when scrolling down the webpage, they will follow the scroll. Facebook applies this technique to its sidebar; when you scroll down the page, the sidebar follows the scroll, remaining&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507,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>Sticky Position (Bar) with CSS or jQuery - Hongkiat<\/title>\n<meta name=\"description\" content=\"The idea of &#039;sticky position&#039; is to make elements on a website stick and remain visible. These elements will initially be in their designated position,\" \/>\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\/css-sticky-position\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sticky Position (Bar) with CSS or jQuery\" \/>\n<meta property=\"og:description\" content=\"The idea of &#039;sticky position&#039; is to make elements on a website stick and remain visible. These elements will initially be in their designated position,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/\" \/>\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=\"2013-04-01T13:01:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:14:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-sticky-position\/chrome-flags.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sticky-position\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sticky-position\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Sticky Position (Bar) with CSS or jQuery\",\"datePublished\":\"2013-04-01T13:01:46+00:00\",\"dateModified\":\"2025-04-24T09:14:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sticky-position\\\/\"},\"wordCount\":321,\"commentCount\":27,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sticky-position\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-sticky-position\\\/chrome-flags.jpg\",\"keywords\":[\"CSS\",\"jQuery\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sticky-position\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sticky-position\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sticky-position\\\/\",\"name\":\"Sticky Position (Bar) with CSS or jQuery - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sticky-position\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sticky-position\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-sticky-position\\\/chrome-flags.jpg\",\"datePublished\":\"2013-04-01T13:01:46+00:00\",\"dateModified\":\"2025-04-24T09:14:57+00:00\",\"description\":\"The idea of 'sticky position' is to make elements on a website stick and remain visible. These elements will initially be in their designated position,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sticky-position\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sticky-position\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sticky-position\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-sticky-position\\\/chrome-flags.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-sticky-position\\\/chrome-flags.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-sticky-position\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sticky Position (Bar) with CSS or jQuery\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Sticky Position (Bar) with CSS or jQuery - Hongkiat","description":"The idea of 'sticky position' is to make elements on a website stick and remain visible. These elements will initially be in their designated position,","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\/css-sticky-position\/","og_locale":"en_US","og_type":"article","og_title":"Sticky Position (Bar) with CSS or jQuery","og_description":"The idea of 'sticky position' is to make elements on a website stick and remain visible. These elements will initially be in their designated position,","og_url":"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-04-01T13:01:46+00:00","article_modified_time":"2025-04-24T09:14:57+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-sticky-position\/chrome-flags.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Sticky Position (Bar) with CSS or jQuery","datePublished":"2013-04-01T13:01:46+00:00","dateModified":"2025-04-24T09:14:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/"},"wordCount":321,"commentCount":27,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-sticky-position\/chrome-flags.jpg","keywords":["CSS","jQuery"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/","url":"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/","name":"Sticky Position (Bar) with CSS or jQuery - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-sticky-position\/chrome-flags.jpg","datePublished":"2013-04-01T13:01:46+00:00","dateModified":"2025-04-24T09:14:57+00:00","description":"The idea of 'sticky position' is to make elements on a website stick and remain visible. These elements will initially be in their designated position,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-sticky-position\/chrome-flags.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-sticky-position\/chrome-flags.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-sticky-position\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Sticky Position (Bar) with CSS or jQuery"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4mW","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16798","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16798"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16798\/revisions"}],"predecessor-version":[{"id":74110,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16798\/revisions\/74110"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16798"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}