スクロール後のトップツールバー、jQuery

私はMagento管理ストアでこのツールバーを見ました。ページがスクロールダウンしてメニューが消えた後、上記の管理パネルのような透明な背景でトップツールバーが表示されます。

0

1 答え

HTML:

<div class="auto-style1">
    Top of Page 
</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);
  });
});     
1
追加された
働くさらに参照: davidwalsh.name/jquery-top-link
追加された 著者 Nogard,