{"id":354,"date":"2016-11-15T19:23:59","date_gmt":"2016-11-15T21:23:59","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=354"},"modified":"2016-11-16T15:54:31","modified_gmt":"2016-11-16T17:54:31","slug":"diminuir-o-menu-fixo-ao-scroll","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/diminuir-o-menu-fixo-ao-scroll\/","title":{"rendered":"Diminuir o Menu fixo ao Scroll"},"content":{"rendered":"<p>Um menu fixo pode ser uma boa solu\u00e7\u00e3o de UX Design, pois permite que o usu\u00e1rio navegue entre as principais p\u00e1ginas do site a qualquer momento durante a navega\u00e7\u00e3o.<\/p>\n<p>Mas caso este ocupe uma boa \u00e1rea do site, passar\u00e1 a ser uma distra\u00e7\u00e3o para o usu\u00e1rio. Se voc\u00ea possui um menu fixo com um valor alto de height, o ideal \u00e9 diminuir ele uma vez que o usu\u00e1rio comece a navegar pela p\u00e1gina.<\/p>\n<p data-height=\"400\" data-theme-id=\"24256\" data-slug-hash=\"ZBpGaR\" data-default-tab=\"result\" data-user=\"origamid\" data-embed-version=\"2\" data-pen-title=\"ZBpGaR\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/ZBpGaR\/\">ZBpGaR<\/a> by Andre  Origamid (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>\u00c9 bem simples fazer isso com jQuery. A l\u00f3gica \u00e9 a seguinte:<\/p>\n<ul>\n<li>1 &#8211; Identificar se o usu\u00e1rio usou o scroll.<\/li>\n<li>2 &#8211; Verificar a dist\u00e2ncia total entre o scroll e o topo da p\u00e1gina.<\/li>\n<li>3 &#8211; Comparar essa dist\u00e2ncia com o height total do menu.<\/li>\n<li>4 &#8211; Caso seja maior, adicionar uma classe ao menu. (Aqui voc\u00ea pode ir al\u00e9m, por exemplo, voc\u00ea poderia mudar a marca completa no menu por apenas o s\u00edmbolo da marca).<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">\n\n$(window).on('scroll', _.debounce(function() {\n    var $nav = $('nav'),\n        navHeight = $nav.outerHeight(),\n        windowTop = $(this).scrollTop();\n    \n    if (windowTop > navHeight) {\n        $nav.addClass('small');\n        $('nav > a').text('TC');\n    } else {\n        $nav.removeClass('small');\n        $('nav > a').text('The Company');\n    }\n}, 200));\n\n<\/code><\/pre>\n<p>Agora vamos por partes:<\/p>\n<p>1 &#8211; Para identificar se o usu\u00e1rio utilizou o scroll, eu uso o m\u00e9todo .on(&#8216;scroll&#8217;, function(){}); Antes de ativar a fun\u00e7\u00e3o eu adicionei um _.debounce(), ele serve praticamente para impedir que a fun\u00e7\u00e3o seja ativada diversas vezes ao scroll, ele garante apenas uma execu\u00e7\u00e3o da fun\u00e7\u00e3o a cada 200ms. Esse _.debounce foi carregado da biblioteca lodash.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ Aciona a fun\u00e7\u00e3o toda vez que o scroll \u00e9 utilizado\n$(window).on('scroll', _.debounce(function() {\n\n\/\/ Utiliza 200ms com o _.debounce, para evitar excessivas ativa\u00e7\u00f5es da fun\u00e7\u00e3o.\n}, 200));\n\n<\/code><\/pre>\n<p>2 &#8211; Agora identificamos a dist\u00e2ncia entre o scroll e o topo, assim como o height total do nosso menu.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ Coloca o menu em uma vari\u00e1vel\nvar $nav = $('nav'),\n\/\/ Identifica o height total do menu\n    navHeight = $nav.outerHeight(),\n\/\/ Identifica a dist\u00e2ncia entre o scroll e o topo\n    windowTop = $(this).scrollTop();\n<\/code><\/pre>\n<p>3 &#8211; Por \u00faltimo comparamos os valores anteriores e adicionamos a classe para diminuir o menu. Essa classe pode conter qualquer estilo que voc\u00ea quiser, no meu exemplo eu diminuo os paddings e o font-size do menu, por\u00e9m n\u00e3o existe limite para o que voc\u00ea pode fazer aqui. O objetivo \u00e9 diminuir a \u00e1rea total ocupada pelo menu para ela n\u00e3o distrair o usu\u00e1rio.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ Verifica se a dist\u00e2ncia entre o scroll e o topo \u00e9 maior que o height do menu\nif (windowTop > navHeight) {\n\/\/ Caso verdadeiro adiciona uma classe com nome de small ao menu\n    $nav.addClass('small');\n\/\/ Modifica o nome completo da empresa para uma sigla apenas\n    $('nav > a').text('TC');\n} else {\n\/\/ Caso contr\u00e1rio remove a classe small do menu\n    $nav.removeClass('small');\n\/\/ Modifica a sigla para o nome completo da empresa\n    $('nav > a').text('The Company');\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Um menu fixo pode ser uma boa solu\u00e7\u00e3o de UX Design, pois permite que o usu\u00e1rio navegue entre as principais p\u00e1ginas do site a qualquer momento durante a navega\u00e7\u00e3o. Mas caso este ocupe uma boa \u00e1rea do site, passar\u00e1 a ser uma distra\u00e7\u00e3o para o usu\u00e1rio. Se voc\u00ea possui um menu fixo com um valor [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/354"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=354"}],"version-history":[{"count":8,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/354\/revisions"}],"predecessor-version":[{"id":362,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/354\/revisions\/362"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}