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()內容相對於文檔的偏移（不是瀏覽器窗口），所以可以理解為固定值；