页面定位

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

网站导航

网站导航

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 6,745评论 0 16
  • 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容...
    忘川慕白阅读 5,986评论 7 113
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,751评论 1 52
  • 本篇系 彩云之南历史文化故事 系列之一 壹、惊梦 贰、傩舞 叁、朝辩 肆、鸾心 伍、国殇 陆、涉江 柒、礼魂 捌、...
    霍子荷阅读 651评论 0 15
  • 今天看了《后来的我们》。哭傻了,全程都是泪点。仿佛看到当年的自己,为一个人奋不顾身。所有的喜悲都系于他可是他却全然...
    逆天小蝴蝶阅读 179评论 0 0