Efectos de menu javascript con jQuery

[loncho_rojas]

Buenas mis estimados amig@s del Foro mas bueno of the world.

Necesito una mano o ayuda para encontrar como hacer unos efectos con ayuda de Javascript y sus plugins jQuery.

Son 2 efectos pero siempre del menu principal...

A- que el menu siga en la pantalla, aunque se haga scroll.. (ya se que existe CSS con el FIXED, pero no es lo que quiero..)

En el ejemplo, nótese como el menu esta en una posicion X, y luego al desplazar, cambia y luego sigue por toda la pantalla.

B- que cuando dé click en uno de los botones del menu, se desplace hacia otra posicion pero dentro de la misma página con un efecto de animación... les paso un ejemplo en esta página, nótese cuando clickean se desplaza con animación hacia el contenido del sitio.

EJEMPLO 1:
http://demicreative.com/

necesito los mismo efectos.. si podrían ayudarme, orientarme y demás...

[nataliagb1992]

La pagina esa mla muchisimo la vdd , no se bien como hacer lo que necesitas aqui te dejo la pagina de jquey http://jquery.com/ y si le das a docummentation ay te aparece un menu cn tds ls eventos funciones y demas y sobre tod con muchos ejemplos de todas las funcionalidades de jquery , voy a seguir tu tema y pr favor dime si haces una pagina parecida el como por que es genial un saludoo

[nataliagb1992]

por tro lado si te fijas bien en la pagina , lo que tiene es una cabecera fija y el resto es una pagina mu larga per slo una , y va enlazand a lugares dentro de la misma pagina en plan el tipico enlace arriba y abajo de html , si abres el codigo fuente te darás cuenta de que todon son enlaces y se va moviendo dentro de una misma pagina . Espero que esto te haya ayudado seguiré mirando aver si veo algo mas , bueno este es el unico script que veo pero no lo entiendo muy bn ..

Código Javascript:

<script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-335333-9']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
 

[loncho_rojas]

nataliagb1992 Ahora estoy tratando de hacer una especie de Copy Paste del sitio, esa cabecera que me mencionas ahi es del google Analytics... aunque mirando el codigo fuente estan los enlaces del pluggin.. solo que no entiendo bien de jQuery, estoy leyendo un manual para entender su sintaxis... seguire posteando para ver si puedo resolverlo..

[pzin]

Tenía algo parecido —o igual— para la paginación de un foro, a ver si lo encuentro, que en alguna recóndita carpeta tiene que andar.

[pzin]

Que bien me organizo.

Puse un ejemplo aquí: http://jsfiddle.net/sN85U/

Supongo que está más o menos claro el ejemplo.

No sé si será la mejor forma de hacerlo o no. De hecho no recuerdo ni de dónde salió —lo tenía de una web que hice en 2008 creo— pero ahí está.

[loncho_rojas]

Bueno..para el tema del menu tengo esta solución, no se que taaaan efectiva es, pero con lo poco que conozco los pluggins de Jquery creo que es algo...

Bueno.. para que cuando scrolee se me quede el menu una vez que topée con el top del navegador y quede fijo hago lo siguiente...

coloco el plugin de jquery en el HEAD del html:

Código Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
 

coloco las condicionales del pluggin... veran que le digo que cuando pase los 210 pixeles, el plugin me agregue un estilo css a la etiqueta NAV del html donde tengo mis botones, y de no ser asi.. que no tenga ningun stilo CSS mas que el original:

Código Javascript:

<!-- SCROLL and ANIMATED HEADER -->
<script type="text/javascript">
 
 
    $(document).ready(function(){
    
        // hide #back-top first
        //$("#back-top").hide();
        
        // fade in #back-top
        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 210) {
                    $('nav').addClass('full');
                } else {
                    $('nav').removeClass('full');
                }
            });
    
        });
    
    });
</script>
 

Ahora el simple CSS que hace el milagro:

Código CSS:

nav{
    width:100%;
    clear:both;
}
 
nav.full{
    width:100%;
    clear:both;
    top:0;
    position: fixed;
    z-index: 999;
 
}
 

y aqui el HTML del BODY:

Código HTML:

<nav>
    
       <div id="menu_princ">
          <ul id="topnav">
             <li><a href="#">Inicio</a></li>
             <li><a href="#">El Grupo Editorial</a></li>
             <li><a href="#libros">Libros para leer</a></li>
             <li><a href="#especial">Escr&iacute;benos</a></li>
          </ul>
       </div>
                
            
</nav> 

espero que sirva como referencia al menos.. ahora estoy investigando como hacer que haga la animacion cuando vaya a un link X..