vue的爬坑之路------vue实现菜品分类之后监听滚动事件，实现动态修改菜单栏状态

html内容

<div @scroll="scroll_fun($event)" id="app">
			<div class="foots" v-if="foot_data[typeObj.type]!=null&&foot_data[typeObj.type].length!=0" :foot-type="typeObj.type" v-for="(typeObj,$index) in foot_type">
				<div>
					<br>
					<div class="foot_type">{{typeObj.name}}</div>
				</div>
				<div class="foot" v-for="footObj in foot_data[typeObj.type]">{{footObj.name}}</div>
			</div>
		</div>

css样式

<style>
			html,
			body {
				margin: 0;
				padding: 0;
			}
			
			#app {
				height: 100vh;
				overflow: auto;
			}
			
			.foot {
				display: inline-block;
				width: 25%;
				height: 100px;
			}
			
			.foot_type {
				background-color: red;
			}
		</style>

vue.js代码

<script type="text/javascript" src="../static/jquery/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../static/vuejs/vue.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				var app = new Vue({
					el: '#app',
					data: {
						"foot_data": {
							"type1": [{
								"name": "name1",
								"type": "招牌"
							}, {
								"name": "name2",
								"type": "招牌"
							}],
							"type2": [{
								"name": "name3",
								"type": "开胃菜"
							}, {
								"name": "name4",
								"type": "开胃菜"
							}, {
								"name": "name5",
								"type": "开胃菜"
							}, {
								"name": "name6",
								"type": "开胃菜"
							}, {
								"name": "name7",
								"type": "开胃菜"
							}, {
								"name": "name8",
								"type": "开胃菜"
							}, {
								"name": "name4",
								"type": "开胃菜"
							}, {
								"name": "name5",
								"type": "开胃菜"
							}, {
								"name": "name6",
								"type": "开胃菜"
							}, {
								"name": "name7",
								"type": "开胃菜"
							}, {
								"name": "name8",
								"type": "开胃菜"
							}, {
								"name": "name4",
								"type": "开胃菜"
							}, {
								"name": "name5",
								"type": "开胃菜"
							}, {
								"name": "name6",
								"type": "开胃菜"
							}, {
								"name": "name7",
								"type": "开胃菜"
							}, {
								"name": "name8",
								"type": "开胃菜"
							}, {
								"name": "name4",
								"type": "开胃菜"
							}, {
								"name": "name5",
								"type": "开胃菜"
							}, {
								"name": "name6",
								"type": "开胃菜"
							}, {
								"name": "name7",
								"type": "开胃菜"
							}, {
								"name": "name8",
								"type": "开胃菜"
							}, {
								"name": "name4",
								"type": "开胃菜"
							}, {
								"name": "name5",
								"type": "开胃菜"
							}, {
								"name": "name6",
								"type": "开胃菜"
							}, {
								"name": "name7",
								"type": "开胃菜"
							}, {
								"name": "name8",
								"type": "开胃菜"
							}, {
								"name": "name4",
								"type": "开胃菜"
							}, {
								"name": "name5",
								"type": "开胃菜"
							}, {
								"name": "name6",
								"type": "开胃菜"
							}, {
								"name": "name7",
								"type": "开胃菜"
							}, {
								"name": "name8",
								"type": "开胃菜"
							}, {
								"name": "name4",
								"type": "开胃菜"
							}, {
								"name": "name5",
								"type": "开胃菜"
							}, {
								"name": "name6",
								"type": "开胃菜"
							}, {
								"name": "name7",
								"type": "开胃菜"
							}, {
								"name": "name8",
								"type": "开胃菜"
							}, {
								"name": "name4",
								"type": "开胃菜"
							}, {
								"name": "name5",
								"type": "开胃菜"
							}, {
								"name": "name6",
								"type": "开胃菜"
							}, {
								"name": "name7",
								"type": "开胃菜"
							}, {
								"name": "name8",
								"type": "开胃菜"
							}, {
								"name": "name4",
								"type": "开胃菜"
							}, {
								"name": "name5",
								"type": "开胃菜"
							}, {
								"name": "name6",
								"type": "开胃菜"
							}, {
								"name": "name7",
								"type": "开胃菜"
							}, {
								"name": "name8",
								"type": "开胃菜"
							}, {
								"name": "name4",
								"type": "开胃菜"
							}, {
								"name": "name5",
								"type": "开胃菜"
							}, {
								"name": "name6",
								"type": "开胃菜"
							}, {
								"name": "name7",
								"type": "开胃菜"
							}, {
								"name": "name8",
								"type": "开胃菜"
							}]
						},
						"foot_type": [{
							"type": "type3",
							"name": "1111"
						}, {
							"type": "type1",
							"name": "招牌"
						}, {
							"type": "type2",
							"name": "开胃菜"
						}],
						"foot_type_top": {},
						"foot_type_bottom": {}
					},
					methods: {
						scroll_fun: function(e) {
							var scrollTop = this.$el.scrollTop;
							for(var key in this.foot_type_top) {
								var value = this.foot_type_top[key];
								if(value < scrollTop&&scrollTop<this.foot_type_bottom[key]) {
									console.log("-------------");
									console.log(key);
								}
							}
						},
						init_foot_type_data: function() {
							var $types = $("#app").find(".foots");
							for(var i = 0; i < $types.size(); i++) {
								var key = $types.eq(i).attr("foot-type");
								var value = $types.eq(i).position().top;
								var height=$types.eq(i).height();
								this.foot_type_top[key] = value;
								this.foot_type_bottom[key]=value+height;
							}
							console.log(this.foot_type_top);
						}
					},
					mounted: function() {
						this.init_foot_type_data();
					}

				});
			}
		</script>

methods：不调用不会执行。 mounted:在模板渲染成html后调用，通常是初始化页面完成后；

vue的生命周期

beforeCreate>created>beforeMount>mounted>beforeUpdate>updated>beforeDestroy>
destroyed

$(“div”).scrollTop(100); 获取滚动条距离顶点的位置，然后和当前div的高度进行对比