jQuery实现滚动监听

1.设计思路

1）获取窗口滚动高度；

2）获取附加导航栏；

3）获取导航栏下的所有li；

4）通过相同class获取所有监听元素；（此例中为jumbotron巨幕）

5）遍历所有监听元素，若当前元素距离文档高度小于文档滚动条的垂直偏移量（即滚动高度），获取当前元素ID。（此处获取的ID值，实际为ID值覆盖替换，因为存在有多个元素的e当前元素距离文档高度小于文档滚动条的垂直偏移量的情况，但只有最后的ID是有效值，因

为前边的会被后边的覆覆盖替换掉）

6）给对应的导航添加class（bootstrap中为给li添加active），先移出已有的active，然后再添加。

实现代码
$(document).ready(function() {
//定义全局变量，获取附加导航栏、导航列表、链接、各楼层、各楼层距离文档的高度
  var menu = $("#add-nav"),
    lists = menu.find("li"),
    jumbotron = $(".jumbotron"),
    currentID;
  $(window).scroll(function() {
//获取文档滚动高度
        var top = $(document).scrollTop();

//遍历楼层
        jumbotron.each(function() {
                var $this = $(this),
                    jumbotronTop =$this.offset().top;//获取当前楼层的高度
                if (top > (jumbotronTop - 200)) {
                        currentID = "#" +　$this.attr("id");//每个小于top的楼层都会赋值一次，逐层覆盖替换，最后一层才是最后的id值
                }
                else {
                        return false;
                };
        })
//给相应楼层对应的附加到导航添加class
                //首先清除所有active
                var currentActive = menu.find(".active");
                if (currentID && currentActive.find("a:eq(0)").attr("href") != currentID) {
                  currentActive.removeClass("active");

                //给相应导航添加class
          menu.find("[href="+currentID+"]").parent().addClass("active");
                }
  })

});

用到的方法有：scroll()、scrollTop()、offset()、attr()、addClass()、removeClass()、find()、each()、parent()

其中重点说明：.offset()内容相对于文档的偏移（不是浏览器窗口），所以可以理解为固定值；