大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > JavaScript技巧 > 一段短小精悍的漂浮代码

一段短小精悍的漂浮代码

关键词:漂浮代码  阅读(877) 赞(56)

[摘要]这是一段短小精悍的漂浮代码,与大家分享。

jquery.scroll-lock.js

/*
* Plugin developed by Dan Bentley
* @dan_bentley
*
* @danott: Found on http://csswizardry.com/. No licensing information provided, so I will use it
* unless told otherwise by it's author.
*/

(function($) {

  var defaults = {};

  $.fn.fixedscroll = function(opts) {

    var options = $.extend(defaults, opts);

    var el = $(this);
    if (el.css('position') !== 'fixed') return;

    var lockPosition = options.lockElement.offset().top - el.outerHeight();
    var offsetTop = options.offset.top || 0;

    $(window).bind('load scroll', function(e) {

      if ($(window).scrollTop() + offsetTop >= lockPosition) {
        el.css({
          position: "absolute",
          top: lockPosition
        });
      } else {
        el.css({
          position: "fixed",
          top: offsetTop
        });
      }
    });
  };

})(jQuery);

$(document).ready(function() {

  $('#header > div').fixedscroll({
    'offset': {'top': 75},
    'lockElement': $('#comments')
  });

});



相关评论