{"id":1224,"date":"2012-02-07T22:13:45","date_gmt":"2012-02-07T22:13:45","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1224"},"modified":"2013-01-02T14:39:30","modified_gmt":"2013-01-02T14:39:30","slug":"scrolling-sidebar","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/","title":{"rendered":"Barra lateral sidebar siempre visible"},"content":{"rendered":"<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-thumbnail wp-image-4309\" title=\"jquery\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3-150x150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3-150x150.png 150w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3-80x80.png 80w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3-180x180.png 180w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3.png 256w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>Cuando tenemos p\u00e1ginas con mucho texto y un men\u00fa lateral con links a m\u00e1s contenidos apreciamos que tras hacer scroll de la pantalla para ver la informaci\u00f3n hasta el final comunmente el men\u00fa lateral ya no se aprecia ya que suele estar fijo en pantalla.<\/p>\n<p>Utilizando la librer\u00eda jQuery m\u00e1s alguna t\u00e9cnica CSS podemos hacer movible dicho men\u00fa con el scroll de pantalla para tenerlo siempre visible.<\/p>\n<p>Realmente es muy \u00fatil, por ejemplo, para grandes cantidades de texto en las que quieres mostrar unos enlaces internos a determinadas partes de ese texto o subsecciones o lo que quieras.<\/p>\n<p>Es muy simple, luego de agregar la librer\u00eda jQuery a tu web, debes indicarle que capa de tu html ser\u00e1 la que se mueva acorde al scroll que hagas en tu web y en tu html, indicar el div que har\u00e1 de barra lateral y un poco de CSS para adornar tu barra lateral.<\/p>\n<p>Es m\u00e1s dif\u00edcil de explicar que de hacer as\u00ed que mejor <a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/scrolling-sidebar\/\">observa el ejemplo en funcionamiento<\/a>.<strong><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando tenemos p\u00e1ginas con mucho texto y un men\u00fa lateral con links a m\u00e1s contenidos apreciamos que tras hacer scroll de la pantalla para ver la informaci\u00f3n hasta el final comunmente el men\u00fa lateral ya no se aprecia ya que suele estar fijo en pantalla. Utilizando la librer\u00eda jQuery m\u00e1s alguna t\u00e9cnica CSS podemos hacer [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4309,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,5],"tags":[60],"class_list":["post-1224","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-jquery","tag-scroll"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Barra lateral sidebar siempre visible - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Barra lateral sidebar siempre visible - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Cuando tenemos p\u00e1ginas con mucho texto y un men\u00fa lateral con links a m\u00e1s contenidos apreciamos que tras hacer scroll de la pantalla para ver la informaci\u00f3n hasta el final comunmente el men\u00fa lateral ya no se aprecia ya que suele estar fijo en pantalla. Utilizando la librer\u00eda jQuery m\u00e1s alguna t\u00e9cnica CSS podemos hacer [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-02-07T22:13:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-01-02T14:39:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"256\" \/>\n\t<meta property=\"og:image:height\" content=\"256\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/\",\"name\":\"Barra lateral sidebar siempre visible - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3.png\",\"datePublished\":\"2012-02-07T22:13:45+00:00\",\"dateModified\":\"2013-01-02T14:39:30+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3.png\",\"width\":256,\"height\":256},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Barra lateral sidebar siempre visible\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Barra lateral sidebar siempre visible - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Barra lateral sidebar siempre visible - Jose Aguilar Blog","og_description":"Cuando tenemos p\u00e1ginas con mucho texto y un men\u00fa lateral con links a m\u00e1s contenidos apreciamos que tras hacer scroll de la pantalla para ver la informaci\u00f3n hasta el final comunmente el men\u00fa lateral ya no se aprecia ya que suele estar fijo en pantalla. Utilizando la librer\u00eda jQuery m\u00e1s alguna t\u00e9cnica CSS podemos hacer [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-02-07T22:13:45+00:00","article_modified_time":"2013-01-02T14:39:30+00:00","og_image":[{"width":256,"height":256,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/","url":"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/","name":"Barra lateral sidebar siempre visible - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3.png","datePublished":"2012-02-07T22:13:45+00:00","dateModified":"2013-01-02T14:39:30+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/02\/jquery3.png","width":256,"height":256},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/scrolling-sidebar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Barra lateral sidebar siempre visible"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=1224"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1224\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/4309"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=1224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=1224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=1224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}