描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换。滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换。

思路:比较滚动距离和楼层距离(相对于顶部),如果滚动距离大于等于楼层距离,即进入了相应楼层,然后通过一个变量来记录该楼层的信息,最后传递给右边高亮显示

1.点击右边固定导航项时,左边的内容跟着切换。

只需将右边a的href设置为左边区块的id加上#即可

2.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换。

$(function(){
    $(window).on("scroll",function(e){
        var $floor=$("li[id^=floor]");
        var $nav=$(".mui-lift-nav");
        var floorId="";
        var scrollTop=$(this).scrollTop();
        $floor.each(function(index,Ele){       //index是每个楼层的索引,Ele是每个楼层节点的dom元素对象(这个对象是原生对象,不是jquery对象)
            var offsetTop=$(Ele).offset().top;   //Ele给它一层封装,必须加个美元符号,才能把它转换为jquery对象
            if(scrollTop>=offsetTop){
                floorId="#"+$(this).attr("id");
            }else{
                return false;
            }
        });
        $nav.filter("[href="+floorId+"]").addClass("mui-lift-cur-nav").siblings().removeClass("mui-lift-cur-nav");      //filter方法可以在一个集合里筛选出所要的元素
        if(scrollTop<$floor.first().offset().top ||scrollTop>$floor.last().offset().top+$floor.last().height()){
            $nav.removeClass("mui-lift-cur-nav");
        }
    });        
})

[Jquery]网页定位导航特效的更多相关文章

  1. jquery网页定位导航特效

    <!DOCTYPE html> <html lang="en"> <head> <script src="http://code ...

  2. JQuery和原生JavaScript实现网页定位导航特效

    慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...

  3. jQuery实现网页定位导航

    代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...

  4. 慕课网中网页定位导航中js相关问题总结

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  5. jQuery Tocify 定位导航

    Tocify是一个jQuery插件,能够动态的生成文章目录,Tocify可以随意的设置Twitter Bootstrap 或者 jQueryUI Themeroller支持的可选动画和jQuery的显 ...

  6. jQuery实现电梯导航特效

    功能描述: 当滚动条滑到某个位置时,显示电梯导航: 当用户滚动滚动条时,让电梯导航的选中状态和当前滚动到的区域保持一致: 当用户点击电梯导航时,滚动条滚动到被点击导航对应的区域 准备工作: 首先将jQ ...

  7. JavaScript定位导航滚动2

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  9. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

随机推荐

  1. winform打开唯一窗体、构造函数传值

    制作登入窗体: 制作一个登陆窗体,实现点击按钮关闭此窗体并打开另一个窗体 直接在按钮点击事件中,实例化一个想要打开的窗体 使用show方法打开,并把登陆窗体的visible属性改为false Form ...

  2. Swift语言学习之学习资源

    (1) http://swift.sh (2) Let's Swift – WRITE THE CODE. CHANGE THE WORLD. http://letsswift.com (3)http ...

  3. 【ufldl tutorial】Softmax Regression

    今天太长姿势了,什么叫懂了也写不出代码说的不就是我吗,就那么几行代码居然叽叽歪歪写了一个小时. 首先exercise要实现的是softmax的cost function和gradient,如下图: ( ...

  4. C语言下动态库相互调用

    前段时间需要完成多个模块业务,而这些模块的接口都是一样的,于是为了方便管理就把每个模块都根据接口封装成了SO库,这里就留下SO库调用样例 SO库源文件代码: //TestSo.c #include & ...

  5. vitamio videoView 用隐藏除videoview的控件,并旋转屏幕方向实现的全屏功能,出现的画面不能填充满videoview(画面不完整)

    使用vitamio 封装的播放器 当切换到全屏模式,有时候会出现播放的画面不是全屏的情况, 全屏时,画面只占左半部分并出现拉伸效果,还显示不全,等等其他情况 阅读分析源代码发现是getHolder() ...

  6. 浅谈全区全服架构的SNS游戏后台

    版权声明:本文由梁本志原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/198 来源:腾云阁 https://www.qclo ...

  7. java main函数

    public static void main(String[] args)[String args[]]也对 1)public :公共的权限最大,在任何情况下都可以访问. 原因:为了保证java虚拟 ...

  8. [Java] Java 获取数据库所有表基本信息和表中的所有列基本信息代码

    废话不多说.上代码 import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import ...

  9. NSNotification系统通知优化

    最近在github上看到了LRNotificationObserver这个项目,看了一下实现方式,作者通过ARC机制实例化注册对象子类与关联对象的方法来管理注册对象的生命周期.从而省去了系统通知移除的 ...

  10. (11)odoo权限机制

    -----------------更新时间:10:21 2016-09-29 星期四14:31 2016-09-28 星期三 权限对象命名修改18:06 2016-09-18 星期日11:55 201 ...