美文网首页
右侧锚点式固定滚动导航菜单

右侧锚点式固定滚动导航菜单

作者: dada86 | 来源:发表于2015-01-19 13:48 被阅读1075次

    首先css解决一下ie6不支持position:fixed;的缺陷。
    css
    ===

    #menu {
                position: fixed;
                top: 100px;
                left: 50%;
                margin-left: 400px;
                width: 50px;
            }
     * html, * html body {
            background-image: url(about:blank);
            background-attachment: fixed;
            }
    
    * html #menu {
            position: absolute;
            bottom: auto;
            top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
            }
    

    js:

     $(document).ready(function () {
                $(window).scroll(function () {
                    var items = $("#content").find(".item");
                    var menu = $("#menu");
                    var top = $(document).scrollTop();
                    var currentId = ""; //滚动条现在所在位置的item id
                    items.each(function () {
                        var my = $(this);
                        //m.offset().top代表每一个item的顶部位置
                        if (top > my.offset().top) {
                            currentId = "#" + my.attr("id");
                        } else {
                            return false;
                        }
                    });
    
                    var currentLink = menu.find(".current");
                    if (currentId && currentLink.attr("href") != currentId) {
                        currentLink.removeClass("current");
                        menu.find("[href=" + currentId + "]").addClass("current");
                    }
                });
            });
    

    相关文章

      网友评论

          本文标题:右侧锚点式固定滚动导航菜单

          本文链接:https://www.haomeiwen.com/subject/afchxttx.html