码迷,mamicode.com
首页 > 其他好文 > 详细

前端开发学习笔记四

时间:2014-12-30 17:05:12      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

  前天学习了固定导航栏根据页面滚动条距离来自动定位的效果,其中心思想就是通过判定当前滚动条的值与页面中相应内容值大小的关系来选择。js代码如下(用到了jQuery库):

        $(document).ready(function () {
            $(window).scroll(function () {
                var top = $(window).scrollTop();
                var menu = $("#menu");
                var items = $("#content").find(".item");
                //滚动条发生滚动时,要获取相应的值。
                var currentId = "";
                //让导航菜单实现在滚动条滚动的时候自动设置焦点
                items.each(function () {
                    var This = $(this);
                    var itemTop = This.offset().top;
                    if (top > itemTop - 200) {
                        currentId = This.attr("id");
                    } else {
                        return false;
                    }
                })
                //给相应楼层的a 设置 current,取消其他链接的current
                var currentLink = menu.find(".current");
                if (currentId && currentId != "#"+currentLink.attr("href")) {
                    currentLink.removeClass("current");
                    menu.find("[href=#" + currentId + "]").addClass("current");
                }
            })
        })

 

前端开发学习笔记四

标签:

原文地址:http://www.cnblogs.com/cherryoung/p/4193887.html

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