Javascript 如何修复滚动条上的div

如果在以下URL中向下滚动页面，“共享”div将锁定到浏览器上：

---

我假设他们正在应用一个

位置：fixed属性。如何使用jQuery实现这一点？
关于设计人员的jQuery，有一篇关于这一点的文章写得很好，这是发挥神奇作用的jQuery片段。只需将#comment替换为要浮动的div的选择器

注意：要查看整篇文章，请点击此处：

你可以在下面找到一个例子。基本上，您将一个函数附加到
窗口的
滚动
事件和跟踪
滚动顶部
属性，如果它高于所需的阈值，则应用
位置：固定的
和一些其他css属性


jQuery（函数（$）{
$（窗口）。滚动（函数fix_元素（）{
$（'#target'）.css(
$（窗口）.scrollTop（）>100
？{“位置”：“固定”，“顶部”：“10px”}
：{'position'：'relative'，'top'：'auto'}
);
返回fix_元素；
}());
});
正文{
高度：2000px；
填充顶部：100px；
}
代码{
填充物：5px；
背景：#efef；
}
#目标{
颜色：#c00；
字体：15px arial；
填充：10px；
利润率：10px；
边框：1px实心#c00；
宽度：200px；
}

此
div
将被修复
来源：
我在这里混合了答案，从@Julian的代码和其他人的想法中，我似乎更清楚，剩下的是：

jquery
css:
将var名称“top”更改为另一个名称时效果很好，但替换所有的#注释有点奇怪，您应该使用一个对象来替换它。@Emre-如果我使用
$（窗口）。滚动（fixDiv）。调整大小（fixDiv）而不是
$（窗口）。滚动（fixDiv）；fixDiv（）
$(document).ready(function () {
  var $obj = $('#comment');
  var top = $obj.offset().top - parseFloat($obj.css('marginTop').replace(/auto/, 0));

  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
      // if so, ad the fixed class
      $obj.addClass('fixed');
    } else {
      // otherwise remove it
      $obj.removeClass('fixed');
    }
  });
});

(function($) {
  var triggers = [];
  $.fn.floatingFixed = function(options) {
    options = $.extend({}, $.floatingFixed.defaults, options);
    var r = $(this).each(function() {
      var $this = $(this), pos = $this.position();
      pos.position = $this.css("position");
      $this.data("floatingFixedOrig", pos);
      $this.data("floatingFixedOptions", options);
      triggers.push($this);
    });
    windowScroll();
    return r;
  };

  $.floatingFixed = $.fn.floatingFixed;
  $.floatingFixed.defaults = {
    padding: 0
  };

  var $window = $(window);
  var windowScroll = function() {
    if(triggers.length === 0) { return; }
    var scrollY = $window.scrollTop();
    for(var i = 0; i < triggers.length; i++) {
      var t = triggers[i], opt = t.data("floatingFixedOptions");
      if(!t.data("isFloating")) {
        var off = t.offset();
        t.data("floatingFixedTop", off.top);
        t.data("floatingFixedLeft", off.left);
      }
      var top = top = t.data("floatingFixedTop");
      if(top < scrollY + opt.padding && !t.data("isFloating")) {
        t.css({position: 'fixed', top: opt.padding, left: t.data("floatingFixedLeft"), width: t.width() }).data("isFloating", true);
      } else if(top >= scrollY + opt.padding && t.data("isFloating")) {
        var pos = t.data("floatingFixedOrig");
        t.css(pos).data("isFloating", false);
      }
    }
  };

  $window.scroll(windowScroll).resize(windowScroll);
})(jQuery);

$('#id of the div').floatingFixed();

//store the element
var $cache = $('.my-sticky-element');

//store the initial position of the element
var vTop = $cache.offset().top - parseFloat($cache.css('marginTop').replace(/auto/, 0));
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= vTop) {
      // if so, ad the fixed class
      $cache.addClass('stuck');
    } else {
      // otherwise remove it
      $cache.removeClass('stuck');
    }
  });

.my-sticky-element.stuck {
    position:fixed;
    top:0;
    box-shadow:0 2px 4px rgba(0, 0, 0, .3);
}