Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Sidebar con posición fixed

Estas en el tema de Sidebar con posición fixed en el foro de Frameworks JS en Foros del Web. Que tal amigos(as), el pequeño problemita que tengo es que con javascript en el evento scroll el navegador asigno una clase a un sidebar, el ...
  #1 (permalink)  
Antiguo 09/10/2014, 18:18
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 576
Antigüedad: 20 años, 2 meses
Puntos: 4
Sidebar con posición fixed

Que tal amigos(as), el pequeño problemita que tengo es que con javascript en el evento scroll el navegador asigno una clase a un sidebar, el cliente solicita que el sidebar siempre use el 100% del alto de su contenedor, eso me funciona perfectamente ahora el problemita es si ven la pagina en una resolución de 1024 aparece el scroll, (el máximo del contenedor es de 1260px).

Aquí pueden ver que es lo que pasa.



Lo que necesito es que la div o sidebar no se monte sobre el contenido de la derecha al hacer scroll horizontal.

Aquí un ejemplo de código que estoy usando.

Código Javascript:
Ver original
  1. var windowHeight = $(window).height();
  2.             var sidebarHeight = (windowHeight - 83 - 35);
  3.  
  4.             $(".pane-article-page-sidebars-panel-pane-1 .view-article-page-sidebars").css("height", sidebarHeight);
  5.             $(".panel-3col .panel-col-first").css("height", sidebarHeight);
  6.             setTimeout(function() {
  7.                
  8.                 var totalHeightBranding = $(".region-branding").height();
  9.                 var totalHeightScoreboard = $(".region-scoreboard").height();
  10.                 var message = $("#page #messages").height();
  11.                 var totalMessage = 0;
  12.                 if (message > 0) {
  13.                     totalMessage = message + 20;
  14.                 }
  15.                 var totalHeight = (totalHeightBranding + 7) + totalHeightScoreboard + totalMessage;
  16.                 var totalHeader = $("#page #header").height();
  17.                 $(window).scroll(function(event) {
  18.  
  19.                     var y = $(this).scrollTop();
  20.                     if (y > (totalHeight)) {
  21.                         $(".panel-col-first .inside").addClass("fixed");
  22.                     } else {
  23.                         $(".panel-col-first .inside").removeClass("fixed");
  24.                     }
  25.  
  26.                     var marginContent = 244;
  27.                     if ($(window).scrollTop() + $(window).height() > $(document).height() - marginContent) {
  28.                         $(".panel-col-first .inside").removeClass("fixed").addClass("fixed-bottom");
  29.                     } else {
  30.                         $(".panel-col-first .inside").removeClass("fixed-bottom");
  31.                     }
  32.                 });
  33.                 $(this).scroll();
  34.  
  35.             }, 2000);

Espero respuestas,
Gracias de antemano
__________________
_______
Jorge Rojas.

Etiquetas: fixed, funcion, javascript, sidebar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:00.