$(document).ready(function() {
  $('#btnDel').attr('disabled','disabled');
  $('#btnAdd').click(function() {
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
    var newNum = new Number(num + 1); // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#input' + num).clone().attr('id', 'Add' + newNum);

    // manipulate the name/id values of the input inside the new element
    newElem.children(':last').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

    // insert the new element after the last "duplicatable" input field
    $('#input' + num).after(newElem);

    // enable the "remove" button
    $('#btnDel').attr('disabled',false);

    // business rule: you can only add 10 names
    if (newNum == 10)
      $('#btnAdd').attr('disabled','disabled');
  });

  $('#btnDel').click(function() {
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
    $('#input' + num).remove(); // remove the last element

    // enable the "add" button
    $('#btnAdd').attr('disabled',false);

    // if only one element remains, disable the "remove" button
    if (num-1 == 1)
      $('#btnDel').attr('disabled','disabled');
  });

});

Y ahora el DOM:

<form id="testform">
   <fieldset id="input1" class="clonedInput">
      <label>Name</label>
      <input type="text" name="name1" id="name1" />
   </fieldset>
   <fieldset>
      <label>Need more fields?</label>
      <inputtype="button" id="btnAdd" value="+" />
      <input type="button" id="btnDel" value="-" />
   </fieldset>
</form>

La siguiente función de jQuery permite saber cuándo un elemento del DOM está en la parte superior de la ventana del navegador para, en ese momento, cambiarle las propiedades de estilo necesarias y que permanezca siempre visible. Básicamente asocia .scrollTop() al método .scroll():

$(function () {
  var $win = $(window);
  // definir mediente $pos la altura en píxeles desde el borde superior de la ventana del navegador y el elemento
  var $pos = 140;
  $win.scroll(function () {
     if ($win.scrollTop()        $('.menu').removeClass('fijar');
     else {
       $('.menu').addClass('fijar');
     }
   });
});

Esto lo podemos aplicar a un elemento del DOM con la clase menu:

</pre>
<ul class="menu fijar">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
<pre>

que cuando se encuentre en la parte superior de la ventana adquirira la clase fijar:

</pre>
<ul class="menu fijar">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
<pre>

Los estilos CSS que darán propiedades al elemento los podemos definir de la siguiente manera:

.menu {
  position: absolute;
  top: 140px;
}
.fijar {
  position: fixed !important;
  top: 0 !important;
  z-index: 100;
}

El DOM debe ser algo como lo que sigue:

<div id="flus">

  <div class="part">
   <img src="http://url.de/la-imagen.png" alt="Descripción de la imagen" />
  </div><!-- end .part -->

  <div class="part">
   <img src="http://url.de/la-imagen.png" alt="Descripción de la imagen" />
  </div><!-- end .part -->

  <div class="part">
   <img src="http://url.de/la-imagen.png" alt="Descripción de la imagen" />
  </div><!-- end .part -->

</div><!-- end #flus -->

Ahora el script:

// minimum jQuery gallery
$(document).ready(function(){
        $('#flus div.part').hide();
        $('#flus div.part:first').show().addClass('visto');
        var $curr = $('.visto');
        $('#flus').append('<div class="flus-flechas"><span class="flus-flecha" id="flus-prev" title="P&aacute;gina anterior">&laquo;</span><span class="flus-flecha" id="flus-next" title="P&aacute;gina siguiente">&raquo;</span></div>');
        $('#flus-prev').click(function(){
                if ( $('#flus div.part:first').hasClass('visto') ) {
                } else {
                        $curr = $curr.prev();
                        $('.visto').fadeOut('100').removeClass('visto');
                        $curr.fadeIn('600').addClass('visto');
                }
        });
        $('#flus-next').click(function(){
                if ( $('#flus div.part:last').hasClass('visto') ) {
                } else {
                        $curr = $curr.next();
                        $('.visto').fadeOut('100').removeClass('visto');
                        $curr.fadeIn('600').addClass('visto');
                }
        });
});

50+ Amazing Jquery Examples. Desde los plugins más sencillos, listados deslizantes, menús en acordeón, hasta algunos más complejos o menos corrientes, formularios o ruedas de selección de color. Muy útil para empezar a concebir lo que jQuery puede hacer.

Easy Slider. Un plugin para incorporar menús deslizantes realmente fácil de añadir a cualquier página, desarrollado por CSS Globe.

Easy Tooltip. Un plugin para incorporar elementos de ddistinta complejidad que aparecen al hacer rollover sobre cualquier elemento HTML, también desarrollado por CSS Globe.