jq监听页面滚动改变样式

当我们浏览网站的时候经常会发现，进去的时候导航是这个样子的，当滚动页面之后导航会变化一个样式之后一直悬浮在浏览器的顶部。那么这个是怎么实现的呢?（https://www.teambition.com/

当我们浏览网站的时候经常会发现，进去的时候导航是这个样子的，当滚动页面之后导航会变化一个样式之后一直悬浮在浏览器的顶部。那么这个是怎么实现的呢?（https://www.teambition.com/）

首先我们需要知道我们需要改变的容器的位置，即它距离顶部的高度。然后我们需要知道页面滚动的高度最后通过对这两个高度的判断来改变样式

下面通过一个实例来具体讲解刚进入页面时的样式如图所示

样式如下：

<div class="banner container">        <div class="head">            如何利用FM平台快速引流+轻松变现？        </div>    </div>.banner{          height: 500px;          background: url("images/banner.jpg")no-repeat center;          position: relative;        } .head{          position: absolute;          left: 0;          bottom:0 ;          height: 65px;          background-color: rgba(0,0,0,.5);          line-height: 65px;          text-align: center;          color: #fff;          font-size: 16px;          width: 100%;          max-width: 1160px;        }

接下来我要做的效果是当页面滚动一定高度之后是标题栏悬浮在窗口顶部，并且对其方式改为左对齐

/*将需要的样式写到一个class类里面*/.change{          text-align: left;          position: fixed;          top:0;          left: 50%;          margin-left: -580px;        }   <script>        $(document).ready(function() {//            计算容易距离页面顶部的高度            var navoffeset=$(".head").offset().top;            $(window).scroll(function(){//                检测页面滚动的高度                var scrollpos=$(window).scrollTop();//                当滚动高度超过距离顶部的高度的时候为容器添加想要的样式                if(scrollpos >=navoffeset){                    $(".head").addClass("change");                }else{                    $(".head").removeClass("change");                }            });        });    </script>

实现效果如下