{"id":702,"date":"2022-04-23T10:32:05","date_gmt":"2022-04-23T08:32:05","guid":{"rendered":"https:\/\/jagullo.fr\/blog\/?p=702"},"modified":"2022-09-23T08:05:53","modified_gmt":"2022-09-23T06:05:53","slug":"le-menu-sticky-et-les-elements-en-adherence","status":"publish","type":"post","link":"https:\/\/jagullo.fr\/blog\/le-menu-sticky-et-les-elements-en-adherence\/","title":{"rendered":"Le menu sticky et les \u00e9l\u00e9ments en adh\u00e9rence"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Des \u00e9l\u00e9ments restant visibles au scroll<\/h2>\n\n\n\n<p>Dans une page HTML, les \u00e9l\u00e9ments sticky sont des zones de la page qui restent <strong>accroch\u00e9es en haut de la fen\u00eatre<\/strong> lors du scroll de l&rsquo;utilisateur. C&rsquo;est une propri\u00e9t\u00e9 CSS permettant de mettre en avant des \u00e9l\u00e9ments importants pour l&rsquo;utilisateur. Au niveau de l&rsquo;ergonomie, \u00e7a laisse la possibilit\u00e9 par exemple d&rsquo;afficher un menu de navigation ou une zone de recherche tout le long de page. \u00c0 la diff\u00e9rence de la position fixe, les \u00e9l\u00e9ments sont consid\u00e9r\u00e9s comme \u00e9tant relatifs tant que le haut de la fen\u00eatre ne les atteint pas puis deviennent des \u00e9l\u00e9ments fixes. Sur mobile certaines zones seront affich\u00e9es en relatives, car la largeur de la fen\u00eatre ne permet de les afficher comme sur desktop.<\/p>\n\n\n\n<p>De nombreux th\u00e8mes WordPress proposent d&rsquo;afficher des \u00e9l\u00e9ments en sticky que l&rsquo;on peut activer ou non. Sur une boutique WooCommerce les pages produit utilisent de plus en plus des \u00e9l\u00e9ments sticky pour am\u00e9liorer l&rsquo;ergonomie. Certains th\u00e8mes affichent la galerie photos en sticky afin de la laisser visible pendant que l&rsquo;utilisateur scroll sur la description des produits et le choix des variations. Les anciens navigateurs comme IE10 ou IE11 n&rsquo;affichent pas cette propri\u00e9t\u00e9 et laisseront donc les \u00e9l\u00e9ments positionn\u00e9s en sticky en simple \u00e9l\u00e9ment relatif.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/04\/illustration_sticky-element.jpg\" alt=\"Toutes les \u00e9l\u00e9ments HTML dans une page web peuvent \u00eatre positionn\u00e9es en sticky\" class=\"wp-image-709\" width=\"720\" height=\"480\" srcset=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/04\/illustration_sticky-element.jpg 960w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/04\/illustration_sticky-element-300x200.jpg 300w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/04\/illustration_sticky-element-768x512.jpg 768w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption>Toutes les \u00e9l\u00e9ments HTML peuvent \u00eatre positionn\u00e9es en sticky<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Ajouter un \u00e9l\u00e9ment sticky en CSS<\/h2>\n\n\n\n<p>N&rsquo;importe quelle balise HTML dans une page web peut devenir un \u00e9l\u00e9ment sticky, \u00e7a peut se faire sur le header, la navbar, la sidebar, un div, etc. \u00c7a laisse la possibilit\u00e9 \u00e0 un d\u00e9veloppeur web d&rsquo;utiliser n&rsquo;importe quel composant web de la page pour le mettre en avant. Par exemple sur ce blog la sidebar est positionn\u00e9e en sticky pour permettre l&rsquo;affichage la liste des derniers articles publi\u00e9s tout le long du scroll. <\/p>\n\n\n\n<p>Mettre en place un \u00e9l\u00e9ment sticky en CSS est relativement simple il suffit d&rsquo;ajouter dans son code la bonne propri\u00e9t\u00e9. Par exemple la sidebar de ce blog utilise la propri\u00e9t\u00e9 CSS <strong>position<\/strong> pour s&rsquo;afficher en sticky. En ajoutant la propri\u00e9t\u00e9 top on force l&rsquo;\u00e9l\u00e9ment \u00e0 se positionner \u00e0 24px de la hauteur de la fen\u00eatre seulement quand il passe en sticky.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>\/* sidebar *\/\n.et_pb_extra_column_sidebar{top:24px;position:sticky;margin-bottom:auto;}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Faciliter la navigation des utilisateurs<\/h2>\n\n\n\n<p>Les \u00e9l\u00e9ments qui se positionnent en sticky peuvent aussi faire l&rsquo;objet <strong>d&rsquo;une transformation ou d&rsquo;animation<\/strong>. Par exemple le header d&rsquo;un site peut devenir plus fin et modifier l&rsquo;affichage du menu au moment ou il passe en sticky. Cela permet de toujours avoir la possibilit\u00e9 de naviguer dans un site et de ne pas avoir besoin de remonter tout en haut de la page. Ces diff\u00e9rentes techniques permettent \u00e0 un d\u00e9veloppeur de site Internet d&rsquo;am\u00e9liorer l&rsquo;ergonomie des pages lors de la conception.<\/p>\n\n\n\n<p>Un exemple avec le site de <a rel=\"noreferrer noopener\" href=\"https:\/\/www.adidas.fr\/\" data-type=\"URL\" data-id=\"https:\/\/www.adidas.fr\/\" target=\"_blank\">Adidas<\/a> qui affiche un sous-menu sticky lors du scroll dans la page produit. Ce sous-menu surligne automatiquement le titre de la zone visible dans la description longue du produit et permet de naviguer facilement dans les sous-sections. Ce sous-menu permet aussi de comprendre en un clin d&rsquo;oeil la structure de la description longue du produit.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/04\/screen_adidas-product.png\" alt=\"Le menu de la description produit est positionn\u00e9 en sticky sur le site de Adidas\" class=\"wp-image-715\" width=\"720\" height=\"378\" srcset=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/04\/screen_adidas-product.png 960w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/04\/screen_adidas-product-300x158.png 300w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/04\/screen_adidas-product-768x403.png 768w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption>Le menu de la description produit est positionn\u00e9 en sticky sur le site de Adidas<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et l&rsquo;ergonomie<\/h2>\n\n\n\n<p>En am\u00e9liorant l&rsquo;exp\u00e9rience utilisateur et l&rsquo;ergonomie d&rsquo;un site, les clients auront <strong>une meilleure image de l&rsquo;entreprise <\/strong>et garderont une bonne exp\u00e9rience du site ou de la boutique e-commerce qu&rsquo;ils ont visit\u00e9. Le design UX est un \u00e9l\u00e9ment important que tout d\u00e9veloppeur web doit prendre en compte lors de la cr\u00e9ation de pages HTML. Une bonne ergonomie permet aussi de se distinguer de la concurrence et sera peut-\u00eatre un des facteurs du choix d&rsquo;un client pour une entreprise.<\/p>\n\n\n\n<link rel=\"stylesheet\" href=\"\/blog\/wp-content\/themes\/Extra-child\/assets\/css\/prism.css\">\n<script src=\"\/blog\/wp-content\/themes\/Extra-child\/assets\/js\/prism.js\"><\/script>\n<div class=\"list-tags\"><a href=\"https:\/\/jagullo.fr\/blog\/tag\/css-sass-less\/\" class=\"link-tag\" title=\"CSS \/ SASS \/ LESS\">CSS \/ SASS \/ LESS<\/a><a href=\"https:\/\/jagullo.fr\/blog\/tag\/html\/\" class=\"link-tag\" title=\"HTML\">HTML<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Des \u00e9l\u00e9ments restant visibles au scroll Dans une page HTML, les \u00e9l\u00e9ments sticky sont des zones de la page qui restent accroch\u00e9es en haut de la fen\u00eatre lors du scroll de l&rsquo;utilisateur. C&rsquo;est une propri\u00e9t\u00e9 CSS permettant de mettre en avant des \u00e9l\u00e9ments importants pour l&rsquo;utilisateur. Au niveau de l&rsquo;ergonomie, \u00e7a laisse la possibilit\u00e9 par [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":709,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1],"tags":[28,30],"class_list":["post-702","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-graphisme","tag-css-sass-less","tag-html","et-has-post-format-content","et_post_format-et-post-format-standard"],"_links":{"self":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/comments?post=702"}],"version-history":[{"count":3,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/702\/revisions"}],"predecessor-version":[{"id":1043,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/702\/revisions\/1043"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media\/709"}],"wp:attachment":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media?parent=702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/categories?post=702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/tags?post=702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}