Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] fijar div al llegar al top

Estas en el tema de fijar div al llegar al top en el foro de Jquery en Foros del Web. Tengo un glosario y quiero que el menu con el indice de letras quede fijo al top de la pagina cuando al hacer scroll el ...
  #1 (permalink)  
Antiguo 14/11/2013, 14:51
laura_moreno14
Invitado
 
Mensajes: n/a
Puntos:
fijar div al llegar al top

Tengo un glosario y quiero que el menu con el indice de letras quede fijo al top de la pagina cuando al hacer scroll el div de el menu llege arriba. Hasta ahora solo consigo que se quede fijo nada as empiezas hacer scroll.

Podeis verlo en este link.

Este es el codigo que tengo:

Código HTML:
Ver original
  1. <div id="glosario">
  2.  
  3.     <h1><?php single_cat_title(); ?></h1>
  4.  
  5.     <?php $categories =  get_categories('child_of=100&hide_empty=0');
  6.        foreach  ($categories as $category) {
  7.            //Display the sub category information using $category values like $category->cat_name
  8.             echo '<h2><a name="' . $category->name . '">'.$category->name.'</a></h2>';
  9.             echo '<ul>';
  10.             $posts = get_posts(array('cat' => $category->term_id, 'order' => 'ASC', 'post_type' => 'glosario', 'showposts' =>-1, 'post_status' => 'publish,future,draft'));
  11.             foreach ($posts as $post) {
  12.                 echo '<li><a href="'.get_permalink($post->ID).'">'.get_the_title().'</a></li>';  
  13.             }  
  14.             echo '</ul>';
  15.         } ?>
  16.           <div id="scrollablemenu">
  17. <?php $cats = get_categories( 'child_of=100&hide_empty=0');
  18. foreach ($cats as $cat) {
  19.    echo '<a href="#' . $cat->cat_name . '" class="scrollablemenubutton" class="scroll" onclick="jQuery(\'body\').scrollTo(\'#' . $cat->cat_name . '\', 1000);">' . $cat->cat_name . '</a>';
  20. }
  21. ?>
  22. </div>
  23. </div>

Código CSS:
Ver original
  1. #glosario .stick {
  2. position:fixed;
  3. right:500px;
  4. }


Código Javascript:
Ver original
  1. jQuery(document).ready(function() {
  2.     var s = jQuery("#scrollablemenu");
  3.     var pos = s.position();                    
  4.     jQuery(window).scroll(function() {
  5.         var windowpos = jQuery(window).scrollTop();
  6.         if (windowpos >= pos.top) {
  7.             s.addClass("stick");
  8.         } else {
  9.             s.removeClass("stick");
  10.         }
  11.     });
  12. });

Haber si alguien puede echarme una mano, el javascript no es lo mio.
Gracias de antemano a tod@s!
  #2 (permalink)  
Antiguo 15/11/2013, 15:04
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 10 meses
Puntos: 206
Respuesta: fijar div al llegar al top

Usa s.offset().top en lugar de s.position().top.
  #3 (permalink)  
Antiguo 18/11/2013, 02:27
laura_moreno14
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: fijar div al llegar al top

Muchas gracias! Funciona perfectamente.

Etiquetas: fijar, top
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 08:22.