{"id":292,"date":"2024-03-21T19:08:00","date_gmt":"2024-03-21T17:08:00","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=292"},"modified":"2024-07-15T14:37:24","modified_gmt":"2024-07-15T11:37:24","slug":"javascript-stick-html-top-scroll","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/","title":{"rendered":"Stick HTML element to the top when scrolled through with JavaScript"},"content":{"rendered":"

In this article I’m going to present a lightweight script to stick an HTML element to the top of the page when the user scrolls through it. Use this to make a menu, a call to action button or any other important element always stay in focus. Adjusting the script you can trigger other effects when the page scrolls through an anchor point. Here are the HTML CSS and JS<\/a> codes to use to accomplish this effect.<\/p>\n

\"javascript
\nAnother similar example when we want to attach the section to the bottom of the page<\/a>.<\/p>\n

The HTML Code<\/h2>\n
.\n.\n<div<\/span> id<\/span>=\"stick-here\"<\/span>><\/div<\/span>><\/span>\n<div<\/span> id<\/span>=\"stickThis\"<\/span>><\/span>Sticky note<\/div<\/span>><\/span>\n.\n.\n<\/pre>\n
We’re adding two elements with the specified IDs: the first is the “sensor”. When this element reaches the top of the page it triggers the sticking of the second element. This will only happen if there’s other content below these elements and they can reach the top of the page.<\/p>\n
The Script<\/h2>\n
function sticktothetop<\/span>() {\n    var window_top =<\/span> $<\/span>(window<\/span>).scrollTop();\n    var top =<\/span> $<\/span>('#stick-here'<\/span>).offset().top<\/span>;\n    if<\/span> (window_top ><\/span> top) {\n        $<\/span>('#stickThis'<\/span>).addClass('stick'<\/span>);\n        $<\/span>('#stick-here'<\/span>).height<\/span>($<\/span>('#stickThis'<\/span>).outerHeight<\/span>());\n    } else<\/span> {\n        $<\/span>('#stickThis'<\/span>).removeClass('stick'<\/span>);\n        $<\/span>('#stick-here'<\/span>).height<\/span>(0<\/span>);\n    }\n}\n$<\/span>(function() {\n    $<\/span>(window<\/span>).scroll<\/span>(sticktothetop);\n    sticktothetop();\n});\n<\/pre>\n
The JavaScript checks the distance of the stick-here<\/em> element from the top of the window and when it’s reached it adds the .stick<\/strong> class to the wrapper element.<\/p>\n
The Styles<\/h2>\n
#stickThis<\/span> {\n    padding<\/span>: 5px<\/span><\/span>;\n    background-color<\/span>: #ccc<\/span>;\n    font-size<\/span>: 1.5em<\/span><\/span>;\n    width<\/span>: 300px<\/span><\/span>;\n    text-align<\/span>: center<\/span>;\n    font-weight<\/span>: bold<\/span>;\n    border<\/span>: 2px<\/span><\/span> solid<\/span> #444<\/span>;\n    -webkit-border-radius<\/span>: 10px<\/span><\/span>;\n    border-radius<\/span>: 10px<\/span><\/span>;\n}\n#stickThis<\/span>.stick<\/span> {\n    margin-top<\/span>: 0<\/span>;\n    position<\/span>: fixed<\/span>;\n    top<\/span>: 0<\/span>;\n    z-index<\/span>: 9999<\/span>;\n    -webkit-border-radius<\/span>: 0<\/span> 0<\/span> 10px<\/span><\/span> 10px<\/span><\/span>;\n    border-radius<\/span>: 0<\/span> 0<\/span> 10px<\/span><\/span> 10px<\/span><\/span>;\n}\n<\/pre>\n
Live demo (jsFiddle)<\/strong><\/a><\/p>\n
This CSS code is just a demonstration to show you that there should be a different style for the #stickThis<\/em> and #stickThis.stick<\/em> elements. The important part is the position: fixed; top: 0;<\/strong> part of the sticky styles.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this article I’m going to present a lightweight script to stick an HTML element to the top of the page when the user scrolls through it. Use this to make a menu, a call to action button or any other important element always stay in focus. Adjusting the script you can trigger other effects … Continue reading “Stick HTML element to the top when scrolled through with JavaScript”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,3,4,5,6],"tags":[],"class_list":["post-292","post","type-post","status-publish","format-standard","hentry","category-articles","category-freebies","category-html","category-javascript","category-jquery"],"yoast_head":"\nScript to stick HTML element to the top when scrolled through<\/title>\n<meta name=\"description\" content=\"lightweight script to stick an HTML element to the top of the page when the user scrolls through it. Use this to make a menu, a call to action button or any\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Script to stick HTML element to the top when scrolled through\" \/>\n<meta property=\"og:description\" content=\"lightweight script to stick an HTML element to the top of the page when the user scrolls through it. Use this to make a menu, a call to action button or any\" \/>\n<meta property=\"og:url\" content=\"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML Online\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/htmlcoding\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-21T17:08:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-15T11:37:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/script-stick-top-scroll.jpg\" \/>\n<meta name=\"author\" content=\"HTML Editor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"HTML Editor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated 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:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/\"},\"author\":{\"name\":\"HTML Editor\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\"},\"headline\":\"Stick HTML element to the top when scrolled through with JavaScript\",\"datePublished\":\"2024-03-21T17:08:00+00:00\",\"dateModified\":\"2024-07-15T11:37:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/\"},\"wordCount\":235,\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/script-stick-top-scroll.jpg\",\"articleSection\":[\"Articles\",\"Freebies\",\"HTML\",\"JavaScript\",\"jQuery\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/\",\"url\":\"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/\",\"name\":\"Script to stick HTML element to the top when scrolled through\",\"isPartOf\":{\"@id\":\"https:\/\/html-online.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/script-stick-top-scroll.jpg\",\"datePublished\":\"2024-03-21T17:08:00+00:00\",\"dateModified\":\"2024-07-15T11:37:24+00:00\",\"description\":\"lightweight script to stick an HTML element to the top of the page when the user scrolls through it. Use this to make a menu, a call to action button or any\",\"breadcrumb\":{\"@id\":\"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#primaryimage\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/script-stick-top-scroll.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/script-stick-top-scroll.jpg\",\"width\":400,\"height\":201,\"caption\":\"javascript stick element top scroll through\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/html-online.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Stick HTML element to the top when scrolled through with JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/html-online.com\/articles\/#website\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"name\":\"HTML Online Articles\",\"description\":\"Tips, tricks, tutorials\u2026\",\"publisher\":{\"@id\":\"https:\/\/html-online.com\/articles\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/html-online.com\/articles\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/html-online.com\/articles\/#organization\",\"name\":\"HTML Online\",\"url\":\"https:\/\/html-online.com\/articles\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"contentUrl\":\"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg\",\"width\":350,\"height\":350,\"caption\":\"HTML Online\"},\"image\":{\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/htmlcoding\/\",\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d\",\"name\":\"HTML Editor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g\",\"caption\":\"HTML Editor\"},\"description\":\"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ferencdenes\/\",\"https:\/\/www.youtube.com\/@htmlg\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Script to stick HTML element to the top when scrolled through","description":"lightweight script to stick an HTML element to the top of the page when the user scrolls through it. Use this to make a menu, a call to action button or any","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:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/","og_locale":"en_GB","og_type":"article","og_title":"Script to stick HTML element to the top when scrolled through","og_description":"lightweight script to stick an HTML element to the top of the page when the user scrolls through it. Use this to make a menu, a call to action button or any","og_url":"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/","og_site_name":"HTML Online","article_publisher":"https:\/\/www.facebook.com\/htmlcoding\/","article_published_time":"2024-03-21T17:08:00+00:00","article_modified_time":"2024-07-15T11:37:24+00:00","og_image":[{"url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/script-stick-top-scroll.jpg","type":"","width":"","height":""}],"author":"HTML Editor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"HTML Editor","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#article","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/"},"author":{"name":"HTML Editor","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d"},"headline":"Stick HTML element to the top when scrolled through with JavaScript","datePublished":"2024-03-21T17:08:00+00:00","dateModified":"2024-07-15T11:37:24+00:00","mainEntityOfPage":{"@id":"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/"},"wordCount":235,"publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"image":{"@id":"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/script-stick-top-scroll.jpg","articleSection":["Articles","Freebies","HTML","JavaScript","jQuery"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/","url":"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/","name":"Script to stick HTML element to the top when scrolled through","isPartOf":{"@id":"https:\/\/html-online.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#primaryimage"},"image":{"@id":"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#primaryimage"},"thumbnailUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/script-stick-top-scroll.jpg","datePublished":"2024-03-21T17:08:00+00:00","dateModified":"2024-07-15T11:37:24+00:00","description":"lightweight script to stick an HTML element to the top of the page when the user scrolls through it. Use this to make a menu, a call to action button or any","breadcrumb":{"@id":"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#primaryimage","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/script-stick-top-scroll.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2017\/08\/script-stick-top-scroll.jpg","width":400,"height":201,"caption":"javascript stick element top scroll through"},{"@type":"BreadcrumbList","@id":"https:\/\/html-online.com\/articles\/javascript-stick-html-top-scroll\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/html-online.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Stick HTML element to the top when scrolled through with JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/html-online.com\/articles\/#website","url":"https:\/\/html-online.com\/articles\/","name":"HTML Online Articles","description":"Tips, tricks, tutorials\u2026","publisher":{"@id":"https:\/\/html-online.com\/articles\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/html-online.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/html-online.com\/articles\/#organization","name":"HTML Online","url":"https:\/\/html-online.com\/articles\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/","url":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","contentUrl":"https:\/\/html-online.com\/articles\/wp-content\/uploads\/2022\/06\/logo.jpg","width":350,"height":350,"caption":"HTML Online"},"image":{"@id":"https:\/\/html-online.com\/articles\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/htmlcoding\/","https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/channel\/UCn38Jw1sJzbjVHO95Zp0Sww"]},{"@type":"Person","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/019f9afa07f209153df0fecfc90b8c1d","name":"HTML Editor","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/html-online.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7c1d8f5e7f1dc3e261766a96ac50c6a907fa5c236e87ab73379c57c9114e92cd?s=96&d=mm&r=g","caption":"HTML Editor"},"description":"In 2013, while wrestling with a mountain of client articles and an uncooperative CMS, I decided enough was enough. So, I created an online HTML editor purely out of necessity (and mild frustration). What began as a tool for my own sanity quickly evolved into a gift for the world\u2014or at least for anyone trying to avoid breaking their website's code. Since then, I've shared my tech notes on my blog, which serves as both a handy reference and a digital diary of the adventures and misadventures of a coder.","sameAs":["https:\/\/www.linkedin.com\/in\/ferencdenes\/","https:\/\/www.youtube.com\/@htmlg"]}]}},"_links":{"self":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/comments?post=292"}],"version-history":[{"count":7,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/292\/revisions"}],"predecessor-version":[{"id":1405,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/posts\/292\/revisions\/1405"}],"wp:attachment":[{"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/media?parent=292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/categories?post=292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html-online.com\/articles\/wp-json\/wp\/v2\/tags?post=292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}