{"id":732,"date":"2024-06-18T18:13:03","date_gmt":"2024-06-18T16:13:03","guid":{"rendered":"https:\/\/projektninja.com\/devblog\/?p=732"},"modified":"2024-06-18T22:59:48","modified_gmt":"2024-06-18T20:59:48","slug":"reakcja-na-zescrollowanie-strony","status":"publish","type":"post","link":"https:\/\/projektninja.com\/devblog\/nawigacja\/reakcja-na-zescrollowanie-strony\/","title":{"rendered":"Reakcja na scrollowanie strony poprzez dodanie klasy do body"},"content":{"rendered":"\n<p>Cz\u0119sto zdarza si\u0119, \u017ce menu nawigacyjne lub inne elementy strony zmieniaj\u0105 sw\u00f3j wygl\u0105d podczas przewijania strony. Aby to osi\u0105gn\u0105\u0107, mo\u017cna u\u017cy\u0107 prostego skryptu JavaScript. Dodaje on klas\u0119 <code>.zescrollowana-strona<\/code> do elementu <code>body<\/code> po przewini\u0119ciu strony o wi\u0119cej ni\u017c np. 150 pikseli.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Przyk\u0142adowy kod javascript:<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Funkcja debouncing\nfunction debounce(func, wait) {\n  let timeout;\n  return function(...args) {\n    const context = this;\n    clearTimeout(timeout);\n    timeout = setTimeout(() => func.apply(context, args), wait);\n  };\n}\n\n\/\/ Funkcja obs\u0142uguj\u0105ca przewijanie strony\nfunction handleScroll() {\n  if (window.scrollY > 150) {\n    document.body.classList.add('zescrollowana-strona');\n  } else {\n    document.body.classList.remove('zescrollowana-strona');\n  }\n}\n\n\/\/ Dodanie obs\u0142ugi przewijania z debouncingiem\nconst debouncedHandleScroll = debounce(handleScroll, 100);\nwindow.addEventListener('scroll', debouncedHandleScroll);\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">CSS:<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>#element{\n   \/* regu\u0142y gdy na g\u00f3rze strony *\/\n}\nbody.<span style=\"background-color: initial; font-family: inherit; font-size: inherit; color: initial;\">zescrollowana-strona<\/span> #element{\n  \/* regu\u0142y podczas zescrollowania  *\/\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">CSS:<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Przydatne Linki<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/debounce\" target=\"_blank\" rel=\"noopener\" title=\"\">Debouncing w JavaScript<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/scroll_event\" target=\"_blank\" rel=\"noopener\" title=\"\">Scroll Event w JavaScript<\/a><\/strong><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Chcesz, \u017ceby twoje menu nawigacyjne zmienia\u0142o si\u0119 podczas przewijania strony? Zobacz, jak doda\u0107 klas\u0119 CSS do body za pomoc\u0105 prostego skryptu JavaScript!<\/p>\n","protected":false},"author":1,"featured_media":737,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[274,268],"tags":[25,290,293,202,106,30,46,294,48,291,137,292],"class_list":["post-732","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bajery","category-nawigacja","tag-css","tag-debouncing","tag-efekty-przewijania","tag-front-end","tag-html","tag-javascript","tag-menu","tag-menu-nawigacyjne","tag-nawigacja","tag-przewijanie-strony","tag-web-development","tag-zmiana-klasy"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/732","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=732"}],"version-history":[{"count":2,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/732\/revisions"}],"predecessor-version":[{"id":736,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/posts\/732\/revisions\/736"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media\/737"}],"wp:attachment":[{"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/media?parent=732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/categories?post=732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektninja.com\/devblog\/wp-json\/wp\/v2\/tags?post=732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}