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

 

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

jQuery: 固定节点, 固定sidebar, 固定div, sticky header
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

Leave a Reply