{"id":228,"date":"2023-12-03T15:01:22","date_gmt":"2023-12-03T14:01:22","guid":{"rendered":"https:\/\/intranet.projektninja.com\/?p=228"},"modified":"2024-06-15T18:07:23","modified_gmt":"2024-06-15T16:07:23","slug":"nawigacja-doklejana","status":"publish","type":"post","link":"https:\/\/projektninja.com\/devblog\/nawigacja\/nawigacja-doklejana\/","title":{"rendered":"Jak stworzy\u0107 przyklejan\u0105 nawigacj\u0119 (fixed navigation) w HTML, CSS i JS"},"content":{"rendered":"\n<p>W tym artykule poka\u017cemy, jak stworzy\u0107 przyklejan\u0105 nawigacj\u0119, kt\u00f3ra zmienia swoje po\u0142o\u017cenie na sta\u0142e po przewini\u0119ciu strony.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"nawigacja-polorzenie\"&gt;&lt;\/div&gt;\n&lt;div id=\"nawigacja\"&gt;....&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">CSS:<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>#nawigacja.zescollowana {\n    position: fixed;\n    top: 0px;\n    width: 100%;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>document.addEventListener(\"DOMContentLoaded\", function () {\n            var nawigacjaPolorzenie = document.getElementById(\"nawigacja-polorzenie\");\n            var nawigacjaElement = document.getElementById(\"nawigacja\");\n            var czyZescrollowany = false;\n\n            function obslugaPrzewijania() {\n                var prostokat = nawigacjaPolorzenie.getBoundingClientRect();\n\n                \/\/ Sprawd\u017a, czy g\u00f3rna cz\u0119\u015b\u0107 elementu jest powy\u017cej widoku\n                if (prostokat.top &lt;= 0) {\n                    nawigacjaElement.classList.add(\"zescollowana\");\n                    czyZescrollowany = true;\n                } else if (czyZescrollowany &amp;&amp; prostokat.bottom &gt;= 0) {\n                    nawigacjaElement.classList.remove(\"zescollowana\");\n                    czyZescrollowany = false;\n                }\n            }\n\n            \/\/ Dodaj nas\u0142uchiwanie zdarzenia przewijania z op\u00f3\u017anieniem\n            var debounceTimer;\n            window.addEventListener(\"scroll\", function () {\n                clearTimeout(debounceTimer);\n                debounceTimer = setTimeout(obslugaPrzewijania, 50);\n            });\n\n            \/\/ Sprawd\u017a pocz\u0105tkowy stan przy \u0142adowaniu strony\n            obslugaPrzewijania();\n      });<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Tworzenie przyklejanej nawigacji mo\u017ce by\u0107 proste dzi\u0119ki odpowiednim narz\u0119dziom HTML, CSS i JavaScript. Dowiedz si\u0119, jak sprawi\u0107, by nawigacja pozostawa\u0142a na szczycie strony po przewini\u0119ciu w d\u00f3\u0142.<\/p>\n","protected":false},"author":1,"featured_media":561,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[268],"tags":[25,202,106,30,204,200,199,203,201,137],"class_list":["post-228","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nawigacja","tag-css","tag-front-end","tag-html","tag-javascript","tag-nav","tag-przyklejana-nawigacja","tag-sticky-navigation","tag-ui-ux","tag-web-design","tag-web-development"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/comments?post=228"}],"version-history":[{"count":1,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/228\/revisions"}],"predecessor-version":[{"id":513,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/228\/revisions\/513"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media\/561"}],"wp:attachment":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media?parent=228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/categories?post=228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/tags?post=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}