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;
                this.positionToId(id)
            },
            // 吸顶效果
            handleScroll () {  
                let windowScrollY = window.scrollY;  
                if (windowScrollY > 300) {  
                    this.isFixed = true;  
                } else {  
                    this.isFixed = false;  
                }  
            },
            // 页面定位，无滚动效果
            positionToId (id) {
                let jump = document.querySelector("#"+id)
                let total = jump.offsetTop
                // chrome
                document.body.scrollTop = total
                // firefox
                document.documentElement.scrollTop = total
                // safari
                window.pageYOffset = total
            }
        },
        mounted () {
            window.addEventListener('scroll', this.handleScroll);
        },
        destroyed () {
            window.removeEventListener('scroll', this.handleScroll);
        }
    })
</script>

jQuery

$('html,body').animate({scrollTop:total + 'px'}, 500)

Vue+jQuery

因效果需要做成点击滚动到指定的位置，而vue中我又不知道如何实现，所以就在vue中引入了jQuery，使用jQuery来实现滚动。(这里写的有些粗糙了，将就看吧...)
step1: 在vue中引入jQuery
在vue中引入jQuery
step2: 实现效果
html:

<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>

css:

.active{
    background: #FF7D41;
    color: #FFFFFF;
}
.is-fixed{
    position: fixed;
    top: 0;
    z-index: 9;
    width: 1000px;
}

js:

change(id) {
    var that = this
    let jump = document.getElementById(id)
    // 70为导航栏的高度
    let total = jump.offsetTop - (this.isFixed ? 70 : 140)
    $('html,body').animate({scrollTop: total + 'px'}, 500, () => {
        // 点击后页面滚动，无论高度是否达到变化的值都让它激活变化
        that.flag = id
    })
},
handleScroll () {
    // 这里根据实际情况自行修改，box为我包裹导航及各模块的类
    this.isFixed = window.scrollY > document.getElementById('box').offsetTop
    if (window.scrollY >= document.getElementById('one').offsetTop - 70) {
        this.flag = 'one'
    }
    if (window.scrollY >= document.getElementById('two').offsetTop - 70) {
        this.flag = 'two'
    }
    if (window.scrollY >= document.getElementById('three').offsetTop - 70) {
        this.flag = 'three'
    }
},

网站导航

网站导航