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'
}
},
