Question

I saw this toolbar in the magento admin store. After the page is scrolled down and the menu vanish I want a top toolbar to appear with transparent background like in the aforementioned administration panel.

Answer 1

The HTML:

<div class="auto-style1">
    <a href="#top" id="top-link">Top of Page</a> 
</div>

The CSS:

.auto-style1 { text-align: right;}

The Javascript:

jQuery.fn.topLink = function(settings) 
{
  settings = jQuery.extend({
    min: 1,
    fadeSpeed: 200
  }, settings);
  return this.each(function() {
    //listen for scroll
    var el = $(this);
    el.hide(); //in case the user forgot
    $(window).scroll(function() {
      if($(window).scrollTop() >= settings.min)
      {
        el.fadeIn(settings.fadeSpeed);
      }
      else
      {
        el.fadeOut(settings.fadeSpeed);
      }
    });
  });
};
//usage w/ smoothscroll
$(document).ready(function() {
  //set the link
  $('#top-link').topLink({
    min: 400,
    fadeSpeed: 500
  });
  //smoothscroll
  $('#top-link').click(function(e) {
    e.preventDefault();
    $.scrollTo(0,300);
  });
});