jQuery: 固定节点, 固定sidebar, 固定div, sticky header

先来个不依靠任何插件的：

HTML 代码：

lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
<div id="stick-here"></div>
<div id="stickThis">Sticky note</div>
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />

CSS 代码：

#stickThis {
    padding: 5px;
    background-color: #ccc;
    font-size: 1.5em;
    width: 300px;
    text-align: center;
    font-weight: bold;
    border: 2px solid #444;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#stickThis.stick {
    margin-top: 0;
    position: fixed;
    top: 0;
    z-index: 9999;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

Javascript 代码

function sticktothetop() {
    var window_top = $(window).scrollTop();
    var top = $('#stick-here').offset().top;
    if (window_top > top) {
        $('#stickThis').addClass('stick');
        $('#stick-here').height($('#stickThis').outerHeight());
    } else {
        $('#stickThis').removeClass('stick');
        $('#stick-here').height(0);
    }
}
$(function() {
    $(window).scroll(sticktothetop);
    sticktothetop();
});

效果：DEMO

再来个依靠任何的：

项目地址：https://github.com/garand/sticky

用法：

<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script>

解绑：

<script>
  $("#sticker").unstick();
</script>

选项

• topSpacing:(默认值0：）页面顶部和元素顶部之间的像素。
• bottomSpacing:(默认0:)页面底部和元素底部之间的像素。
• className:(默认值'is-sticky'：）当“粘贴”时，CSS类被添加到元素的包装器中。
• wrapperClassName:(默认'sticky-wrapper':)将CSS类添加到包装器中。
• center:(默认false值：）布尔值，确定粘性元素是否应在页面中水平居中。
• getWidthFrom:(默认值''：）元素的选择器，用于设置“sticky”元素的固定宽度。
• widthFromWrapper:(默认true值：）布尔值，确定是否应更新“sticky”元素的宽度以匹配包装器的宽度。包装器是“粘性”元素的占位符，它是固定的（在静态元素流之外），其宽度取决于上下文和CSS规则。仅在getWidthForm未设置的情况下工作。
• responsiveWidth:(默认false值：）布尔值，确定是否在窗口调整大小时重新计算宽度（使用getWidthfrom）。
• zIndex:(默认值inherit:)控制粘贴元素的z-index。

方法

• sticky(options)：初始化程序。options是可选的。
• sticky('update')：重新计算元素的位置。

事件

• sticky-start：当元素变粘时。
• sticky-end：当元素返回其原始位置时
• sticky-update：当元素被粘住但由于约束原因必须更新位置
• sticky-bottom-reached：当元素达到底部空间限制时
• sticky-bottom-unreached：当元素未达到底部空间限制时

更多：

<script>
  $('#sticker').on('sticky-start', function() { console.log("Started"); });
  $('#sticker').on('sticky-end', function() { console.log("Ended"); });
  $('#sticker').on('sticky-update', function() { console.log("Update"); });
  $('#sticker').on('sticky-bottom-reached', function() { console.log("Bottom reached"); });
  $('#sticker').on('sticky-bottom-unreached', function() { console.log("Bottom unreached"); });
</script>

  <script>
    $(window).load(function(){
      $("#sticker").sticky({ topSpacing: 0, center:true, className:"hey" });
    });
  </script>

效果：DEMO

本文：jQuery: 固定节点, 固定sidebar, 固定div, sticky header