码迷,mamicode.com
首页 > 移动开发 > 详细

内容定位导航js(移动端)

时间:2016-09-02 00:20:40      阅读:360      评论:0      收藏:0      [点我收藏+]

标签:

var myexports={};

myexports.init = function(){
    myexports.moreTxt();//调用

}

myexports.moreTxt = function(){

var subject =$(‘#j_subject‘);
    var navigation = $(‘#j_nav‘);           //导航
    var nav = subject.find(‘.nav-list‘);    //所有按钮
    var conBox = subject.find(‘.cont-box‘);   //模块
    var navTop = navigation.offset().top;  //导航相对于浏览器视口到高度
    nav.on(_tap,function(){
        var t = $(this);
        var ts = t.siblings(‘li‘);
        t.addClass(‘on‘);
        ts.removeClass(‘on‘);
        var tindex = t.index();
        var section = conBox.eq(tindex);
        var stop = section.offset().top;
        $(‘body,html‘).scrollTop(stop);
    });

    $(window).scroll(function () {
        $(‘.cont-box‘).each(function(a,b) {
            var w = $(window).scrollTop();
            var ctop = $(this).offset().top;
            if (w>ctop-30) {
                navigation.find(‘li‘).removeClass(‘on‘);
                navigation.find(‘li‘).eq(a).addClass(‘on‘);
            }
        });
    }).trigger("scroll");
}

$(function() {
    myexports.init();
});

 

内容定位导航js(移动端)

标签:

原文地址:http://www.cnblogs.com/itlichen/p/5831639.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!