当页面滚动到一定位置之后，让元素固定在顶部，小于位置后恢复原来的位置 jquery

// jquery
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        height: 50px;
        background: #ccc;
        width: 100%;
    }
</style>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="box">
    <div class="info"></div>
</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<script type="text/javascript">
    var oInfo = $(".info");
    var oTop = $(".box").offset().top;
    var sTop = 0;
    $(window).scroll(function() {
    sTop = $(this).scrollTop();
    oInfo.text(sTop + '-' + oTop)
    if(sTop >= oTop){
      $(".box").css({
        "position": "fixed",
        "top": "10px"
      })
    } else {
      $(".box").css({
        "position": "static"
      })
    }
    });
</script>

 

// js 代码
<script type="text/javascript">
    var boxEl = document.getElementsByClassName("box")[0];
  var oInfo = document.getElementsByClassName("info")[0];
  var oTop = boxEl.offsetTop
  var sTop = 0;
  window.onscroll = function(){
    sTop = this.scrollY;
    oInfo.innerText = sTop + '-' + oTop;
    if(sTop >= oTop){
      boxEl.style.position = "fixed";
      boxEl.style.top = "10px"
    }else{
      boxEl.style.position = "static";
    }
  }
</script>