Vue

html:

<div id="app">
  <div class="header">Header</div>
  <ul class="nav" :class="isFixed==true?'is-fixed':''">
    <li @click="change('one')" :class="flag=='one'?'active':''">title One</li>
    <li @click="change('two')" :class="flag=='two'?'active':''">title Two</li>
    <li @click="change('three')" :class="flag=='three'?'active':''">title Three</li>
  </ul>
  <div class="model" id="one">model One</div>
  <div class="model" id="two">model Two</div>
  <div class="model" id="three">model Three</div>
</div>

css:

* {
    padding: 0;
    margin: 0;
}
#app {
    width: 1000px;
    margin: 0 auto;
}
.header, .model {
    margin: 10px 0;
    border: 1px solid #ccc;
    height: 300px;
    line-height: 300px;
    text-align: center;
}
.model {
    height: 500px;
    line-height: 500px;
}
.nav {
    background-color: #333;
    color: #fff;
    border: 1px solid #eee;
    overflow: hidden;
}
.nav li {
    list-style: none;
    width: 33.25%;
    float: left;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    border-right: 1px solid #eee;
}
.nav li:last-child {
    border-right: none;
}
.active{
    background: #FF7D41;
    color: #FFFFFF;
}
.is-fixed{
    position: fixed;
    top: 0;
    z-index: 9;
    width: 1000px;
}

js:

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            flag: 'one',
            isFixed: false
        },
        methods:{
            change:function(id){
                this.flag=id;
            },
            handleScroll () {  
                let windowScrollY = window.scrollY;  
                if (windowScrollY > 300) {  
                    this.isFixed = true;  
                } else {  
                    this.isFixed = false;  
                }  
            }
        },
        mounted () {
            window.addEventListener('scroll', this.handleScroll);
        },
        destroyed () {
            window.removeEventListener('scroll', this.handleScroll);
        }
    })
</script>

推荐阅读

配套使用：
页面定位
在vue中引入jQuery

网站导航

网站导航