{"id":7,"date":"2016-04-14T12:47:24","date_gmt":"2016-04-14T12:47:24","guid":{"rendered":"https:\/\/blog.persaper.it\/?p=7"},"modified":"2017-11-09T15:40:35","modified_gmt":"2017-11-09T14:40:35","slug":"come-realizzare-header-fissa-con-animazione","status":"publish","type":"post","link":"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/","title":{"rendered":"Come realizzare header fissa con animazione"},"content":{"rendered":"

In questo articolo vediamo come ottenere una semplice header fissa e con un pizzico di animazione. Pu\u00f2 essere utile a volte avere un header che rimane fissa allo scroll della pagina, specie quando si hanno nel sito molte pagine sviluppate in altezza.<\/p>\n

Per prima cosa creiamo l’header, che nel caso dell’esempio contiene solamente il logo. A livello di codice HTML, l’header sar\u00e0 costituita da due div<\/em>, uno in posizione fissa e l’altro in posizione relativa. Quest’ultimo lo utilizzeremo soltanto per abbassare il contenuto della pagina, assegnandogli un’altezza per evitare che tale contenuto finisca sotto l’header fissa.<\/p>\n

HTML<\/h2>\n

[code_snippet y=”2016″\u00a0name=”realizzare-un-header-fissa-animata” id=”1″]<\/p>\n

A questo punto possiamo fare il pi\u00f9 del lavoro utilizzando i fogli stile. La classe header-fixed<\/em> raccoglie gli stili dell’header che vediamo appena carichiamo la pagina e non siamo ancora scesi con lo scroll.<\/p>\n

CSS<\/h2>\n

[code_snippet y=”2016″\u00a0name=”realizzare-un-header-fissa-animata” id=”2″]<\/p>\n

Per finire utilizziamo Javascript per aggiungere una classe (resized<\/em>) quando si inizia a scrollare la pagina. Questa classe sposter\u00e0 verso l’alto l’header e ridurr\u00e0 le dimensioni del logo.<\/p>\n

Javascript<\/h2>\n

[code_snippet y=”2016″\u00a0name=”realizzare-un-header-fissa-animata” id=”3″]<\/p>\n","protected":false},"excerpt":{"rendered":"

In questo articolo vediamo come ottenere una semplice header fissa e con un pizzico di animazione. Pu\u00f2 essere utile a volte avere un header che rimane fissa allo scroll della pagina, specie quando si hanno nel sito molte pagine sviluppate in altezza. Per prima cosa creiamo l’header, che nel caso dell’esempio contiene solamente il logo. …<\/p>\n

Come realizzare header fissa con animazione<\/span> Leggi altro »<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[10],"tags":[6,5,7],"acf":[],"yoast_head":"\nCome realizzare header fissa e con animazione a scroll<\/title>\n<meta name=\"description\" content=\"Tutorial: realizzare header fissa con animazione allo scroll della pagina, utilizzando HTML, CSS e Javascript. Risorse: Demo + Download\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come realizzare header fissa e con animazione a scroll\" \/>\n<meta property=\"og:description\" content=\"Tutorial: realizzare header fissa con animazione allo scroll della pagina, utilizzando HTML, CSS e Javascript. Risorse: Demo + Download\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Per Saper\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/persaper.it\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-14T12:47:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-09T14:40:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.persaper.it\/wp-content\/uploads\/2016\/05\/persaper_300x300_opengraph.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Davide de Mattia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@per_saper_it\" \/>\n<meta name=\"twitter:site\" content=\"@per_saper_it\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Davide de Mattia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/\"},\"author\":{\"name\":\"Davide de Mattia\",\"@id\":\"https:\/\/blog.persaper.it\/#\/schema\/person\/d4d7e1e9ce8def4eecd35fabc9f0f85d\"},\"headline\":\"Come realizzare header fissa con animazione\",\"datePublished\":\"2016-04-14T12:47:24+00:00\",\"dateModified\":\"2017-11-09T14:40:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/\"},\"wordCount\":185,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/blog.persaper.it\/#organization\"},\"keywords\":[\"CSS\",\"HTML\",\"Javascript\"],\"articleSection\":[\"Tutorial (HTML, CSS, JS)\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/\",\"url\":\"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/\",\"name\":\"Come realizzare header fissa e con animazione a scroll\",\"isPartOf\":{\"@id\":\"https:\/\/blog.persaper.it\/#website\"},\"datePublished\":\"2016-04-14T12:47:24+00:00\",\"dateModified\":\"2017-11-09T14:40:35+00:00\",\"description\":\"Tutorial: realizzare header fissa con animazione allo scroll della pagina, utilizzando HTML, CSS e Javascript. Risorse: Demo + Download\",\"breadcrumb\":{\"@id\":\"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.persaper.it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Come realizzare header fissa con animazione\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.persaper.it\/#website\",\"url\":\"https:\/\/blog.persaper.it\/\",\"name\":\"Blog Per Saper\",\"description\":\"Guida alla tecnologia: tutorial chiari e semplici su come risolvere dubbi e problemi. Guida al web: tutorial ed esempi per imparare a realizzare siti web\",\"publisher\":{\"@id\":\"https:\/\/blog.persaper.it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.persaper.it\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/blog.persaper.it\/#organization\",\"name\":\"Blog Per Saper\",\"url\":\"https:\/\/blog.persaper.it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/blog.persaper.it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/blog.persaper.it\/wp-content\/uploads\/2023\/02\/persaper_blog_150.jpg\",\"contentUrl\":\"https:\/\/blog.persaper.it\/wp-content\/uploads\/2023\/02\/persaper_blog_150.jpg\",\"width\":150,\"height\":150,\"caption\":\"Blog Per Saper\"},\"image\":{\"@id\":\"https:\/\/blog.persaper.it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/persaper.it\/\",\"https:\/\/twitter.com\/per_saper_it\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.persaper.it\/#\/schema\/person\/d4d7e1e9ce8def4eecd35fabc9f0f85d\",\"name\":\"Davide de Mattia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/blog.persaper.it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/01f2526bdbff65199999f66af93bdf5a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/01f2526bdbff65199999f66af93bdf5a?s=96&d=mm&r=g\",\"caption\":\"Davide de Mattia\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Come realizzare header fissa e con animazione a scroll","description":"Tutorial: realizzare header fissa con animazione allo scroll della pagina, utilizzando HTML, CSS e Javascript. Risorse: Demo + Download","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:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/","og_locale":"it_IT","og_type":"article","og_title":"Come realizzare header fissa e con animazione a scroll","og_description":"Tutorial: realizzare header fissa con animazione allo scroll della pagina, utilizzando HTML, CSS e Javascript. Risorse: Demo + Download","og_url":"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/","og_site_name":"Blog Per Saper","article_publisher":"https:\/\/www.facebook.com\/persaper.it\/","article_published_time":"2016-04-14T12:47:24+00:00","article_modified_time":"2017-11-09T14:40:35+00:00","og_image":[{"width":300,"height":300,"url":"https:\/\/blog.persaper.it\/wp-content\/uploads\/2016\/05\/persaper_300x300_opengraph.jpg","type":"image\/jpeg"}],"author":"Davide de Mattia","twitter_card":"summary_large_image","twitter_creator":"@per_saper_it","twitter_site":"@per_saper_it","twitter_misc":{"Scritto da":"Davide de Mattia","Tempo di lettura stimato":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/#article","isPartOf":{"@id":"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/"},"author":{"name":"Davide de Mattia","@id":"https:\/\/blog.persaper.it\/#\/schema\/person\/d4d7e1e9ce8def4eecd35fabc9f0f85d"},"headline":"Come realizzare header fissa con animazione","datePublished":"2016-04-14T12:47:24+00:00","dateModified":"2017-11-09T14:40:35+00:00","mainEntityOfPage":{"@id":"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/"},"wordCount":185,"commentCount":0,"publisher":{"@id":"https:\/\/blog.persaper.it\/#organization"},"keywords":["CSS","HTML","Javascript"],"articleSection":["Tutorial (HTML, CSS, JS)"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/","url":"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/","name":"Come realizzare header fissa e con animazione a scroll","isPartOf":{"@id":"https:\/\/blog.persaper.it\/#website"},"datePublished":"2016-04-14T12:47:24+00:00","dateModified":"2017-11-09T14:40:35+00:00","description":"Tutorial: realizzare header fissa con animazione allo scroll della pagina, utilizzando HTML, CSS e Javascript. Risorse: Demo + Download","breadcrumb":{"@id":"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.persaper.it\/come-realizzare-header-fissa-con-animazione\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.persaper.it\/"},{"@type":"ListItem","position":2,"name":"Come realizzare header fissa con animazione"}]},{"@type":"WebSite","@id":"https:\/\/blog.persaper.it\/#website","url":"https:\/\/blog.persaper.it\/","name":"Blog Per Saper","description":"Guida alla tecnologia: tutorial chiari e semplici su come risolvere dubbi e problemi. Guida al web: tutorial ed esempi per imparare a realizzare siti web","publisher":{"@id":"https:\/\/blog.persaper.it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.persaper.it\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/blog.persaper.it\/#organization","name":"Blog Per Saper","url":"https:\/\/blog.persaper.it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blog.persaper.it\/#\/schema\/logo\/image\/","url":"https:\/\/blog.persaper.it\/wp-content\/uploads\/2023\/02\/persaper_blog_150.jpg","contentUrl":"https:\/\/blog.persaper.it\/wp-content\/uploads\/2023\/02\/persaper_blog_150.jpg","width":150,"height":150,"caption":"Blog Per Saper"},"image":{"@id":"https:\/\/blog.persaper.it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/persaper.it\/","https:\/\/twitter.com\/per_saper_it"]},{"@type":"Person","@id":"https:\/\/blog.persaper.it\/#\/schema\/person\/d4d7e1e9ce8def4eecd35fabc9f0f85d","name":"Davide de Mattia","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blog.persaper.it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/01f2526bdbff65199999f66af93bdf5a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/01f2526bdbff65199999f66af93bdf5a?s=96&d=mm&r=g","caption":"Davide de Mattia"}}]}},"_links":{"self":[{"href":"https:\/\/blog.persaper.it\/wp-json\/wp\/v2\/posts\/7"}],"collection":[{"href":"https:\/\/blog.persaper.it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.persaper.it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.persaper.it\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.persaper.it\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":0,"href":"https:\/\/blog.persaper.it\/wp-json\/wp\/v2\/posts\/7\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.persaper.it\/wp-json\/wp\/v2\/media?parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.persaper.it\/wp-json\/wp\/v2\/categories?post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.persaper.it\/wp-json\/wp\/v2\/tags?post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}