{"id":99,"date":"2012-10-18T09:48:37","date_gmt":"2012-10-18T15:48:37","guid":{"rendered":"http:\/\/j35u5.com.mx\/blog\/?p=99"},"modified":"2014-10-31T12:05:48","modified_gmt":"2014-10-31T18:05:48","slug":"menu-lateral-flotante-con-jquery","status":"publish","type":"post","link":"https:\/\/daimonikos.com\/blog\/menu-lateral-flotante-con-jquery\/","title":{"rendered":"Men\u00fa lateral flotante con jQuery"},"content":{"rendered":"

En ocasiones el contenido de una p\u00e1gina es muy extenso, haciendo que nuestro men\u00fa principal o lateral queden al inicio de la p\u00e1gina, teniendo que hacer scroll de regreso para acceder a este men\u00fa. Algo muy tedioso al navegar en un sitio web.<\/p>\n

Una forma de solucionar esto, es tener un men\u00fa que se mantenga en la misma posici\u00f3n al momento de hacer el scroll hacia abajo. Existen varias formas de hacerlo, pero una de las m\u00e1s f\u00e1ciles y retrocompatibles con navegadores viejos es con jQuery.<\/p>\n

Ver ejemplo en funcionamiento<\/a><\/p>\n<\/div>\n

Lo primero que necesitamos es nuestra estructura b\u00e1sica en html:<\/p>\n

\r\n<div id="wrapper">\r\n\t<header>\r\n\t\t<!-- Contenido del header -->\r\n\t<\/header>\r\n\t<div id="wrap">\r\n\t\t<div id="sidebar">\r\n\t\t\t<!-- Contenido del menu lateral -->\r\n\t\t<\/div>\r\n\t\t<div id="content">\r\n\t\t\t<!-- Contenido de la p\u00e1gina -->\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>\r\n<\/pre>\n
Ahora aplicamos los estilos en css para acomodar los elementos:<\/p>\n
\r\n#wrapper{\r\n\tmargin:0 auto;\r\n\twidth:800px;\r\n}\r\nheader{\r\n\tbackground:#666;\r\n\tborder-radius:0 0 10px 10px;\r\n\tpadding:20px;\r\n}\r\n#wrap{\r\n\tbackground:#666;\r\n\tborder-radius:10px;\r\n\tfloat:right;\r\n\tmargin:20px 0;\r\n\twidth:580px;\r\n}\r\n#sidebar{\r\n\tbackground:#666;\r\n\tborder-radius:10px;\r\n\tfloat:left;\r\n\tmargin-left:-220px;\r\n\tpadding:20px;\r\n\twidth:160px;\r\n}\r\n#content{\r\n\tfloat:right;\r\n\tpadding:20px;\r\n\ttext-align:justify;\r\n\twidth:540px;\r\n}\r\n<\/pre>\n
A continuaci\u00f3n agregamos la librer\u00eda jQuery:<\/p>\n
\r\n<script src="jquery.js"><\/script>\r\n<\/pre>\n
Y por \u00faltimo agregamos la funci\u00f3n que validar\u00e1 cuando hagamos scroll y colocar\u00e1 el men\u00fa en una posici\u00f3n fija:<\/p>\n
\r\n<script type="text\/javascript">\r\n\t$(document).ready(function(){\r\n\t\tvar sidebartop = $('#sidebar').offset().top;\r\n\t\t$(window).scroll(function(){\r\n\t\t\tif( $(window).scrollTop() > sidebartop ) {\r\n\t\t\t\t$('#sidebar').css({position: 'fixed', top: '20px'});\r\n\t\t\t} else {\r\n\t\t\t\t$('#sidebar').css({position: 'static'});\r\n\t\t\t}\r\n\t\t});\r\n\t});\r\n<\/script>\r\n<\/pre>\n
Como puedes ver, es muy sencillo hacer nuestro men\u00fa flotante y ponerlo al alcance desde cualquier parte de nuestra p\u00e1gina.<\/p>\n","protected":false},"excerpt":{"rendered":"
En ocasiones el contenido de una p\u00e1gina es muy extenso, haciendo que nuestro men\u00fa principal o lateral queden al inicio de la p\u00e1gina, teniendo que hacer scroll de regreso para acceder a este men\u00fa. Algo muy tedioso al navegar en un sitio web. Una forma de solucionar esto, es tener un men\u00fa que se mantenga […]<\/p>\n","protected":false},"author":1,"featured_media":179,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[10,18,19,20,9,21],"class_list":["post-99","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css3","tag-floating","tag-flotante","tag-jquery","tag-menu","tag-sidebar"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts\/99","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":0,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/posts\/99\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/media\/179"}],"wp:attachment":[{"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/media?parent=99"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/categories?post=99"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/daimonikos.com\/blog\/wp-json\/wp\/v2\/tags?post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}