滚动后的顶部工具栏，在jQuery中

Question

我在magento管理商店中看到了这个工具栏。在页面向下滚动并且菜单消失后，我希望顶部工具栏以透明背景显示，如上述管理面板中所示。

Answer 1

HTML：

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

CSS：

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

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);
  });
});