当前头像跟随着当前内容移动...（修改版）

差不多半年前写过一篇《当前头像跟随着当前内容移动...》的东西，里面的代码比较幼稚，根据这段时间的学习，把当初的代码进行了修改，贴出来，欢迎大家批评指正。

<script>
(function(){
    var pageY = function(elem){
            return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop; 
        };
    var headScroll = {
        getByClass:function(c){
            return typeof c == 'string' ? document.getElementsByClassName("glance") : c;
        },
        sTop:function(){
            //滚动条距离页面项端的高度
            return document.documentElement.scrollTop || document.body.scrollTop;
        },
        obj:function(){
            return headScroll.getByClass('glance');
        },
        len:function(){
            return headScroll.getByClass('glance').length;
        },
        scrollFn:function(){
            for(var i = 0; i < headScroll.len(); i++ ) {
                        
                headScroll.obj()[i].childNodes[1].childNodes[1].style.position = 'relative';
                headScroll.obj()[i].childNodes[1].childNodes[1].style.top = 0 + 'px';
                
                if(headScroll.sTop() > pageY(headScroll.obj()[i]) 
                    && headScroll.sTop() <= pageY(headScroll.obj()[i]) + headScroll.obj()[i].offsetHeight - 30){
                        
                    var boxTab = headScroll.obj()[i].childNodes[1].childNodes[1];
                    boxTab.style.position = 'fixed';
                }
            }
        }    
    };
    //console.log(headScroll.boxes.obj()[0]);
    window.onscroll=function(){
        headScroll.scrollFn();
    }
})(window);
</script>

写完以后，我给我老公看了看，我老公说我写的只是简单的面向实现的代码，希望过段时间我能做到面向接口编程。

越学越觉得，JS真心是个很好玩儿的东西。

 

/***************************************分隔线**************************************/

最近这个功能，经我组技术牛人指点，又估修改一下逻辑，代码贴出来，欢迎继续拍砖

var oGlance = document.querySelectorAll('.glance'),
    ohead = document.querySelectorAll('.glance-tab-wrap'), 
    sTop = document.documentElement.scrollTop || document.body.scrollTop,  //滚动条距离页面项端的高度
    tabN = 0, 
    iHeight = 8, 
    isDown = true, 
    iScrollTop,    
    oneHeight, 
    hFlag = true;
function getHead(n){
    return oGlance[n].querySelector('.glance-tab-wrap');
}

document.addEventListener('scroll', function(){
    iScrollTop = sTop; 
    sTop = document.documentElement.scrollTop || document.body.scrollTop; 
    isDown = (sTop > iScrollTop) ? true : false; 
    oneHeight = parseInt(oGlance[tabN].offsetHeight);

    if(isDown){
        if(sTop - oGlance[tabN].offsetTop <= oGlance[tabN].offsetHeight - 96){
            ohead[tabN].style.position = "fixed";
            ohead[tabN].style.top = tabN == 0 ? 8 + 'px' : '0';   
            ohead[tabN].style.bottom = '';
        }else if(sTop - oGlance[tabN].offsetTop <= oGlance[tabN].offsetHeight){
            ohead[tabN].style.position = 'absolute';
            ohead[tabN].style.top = '';            
            ohead[tabN].style.bottom = '0';
        }else{
            tabN++;
            ohead[tabN].style.position = "fixed";
            ohead[tabN].style.top = 0 + 'px';
            ohead[tabN].style.bottom = '';
        }
    }else{
        if(sTop - oGlance[tabN].offsetTop > oGlance[tabN].offsetHeight - 96){
            ohead[tabN].style.position = 'absolute';
            ohead[tabN].style.top = '';            
            ohead[tabN].style.bottom = '0';
        }else if(sTop - oGlance[tabN].offsetTop >= 0){
            ohead[tabN].style.position = 'fixed';
            ohead[tabN].style.top = tabN == 0 ? 8 + 'px' : '0';            
            ohead[tabN].style.bottom = '';
        }else if(sTop - oGlance[tabN].offsetTop >= -96 && tabN > 0){
            ohead[tabN].style.position = 'absolute';
            ohead[tabN].style.top = '0';            
            ohead[tabN].style.bottom = '';
            tabN--;
            ohead[tabN].style.position = 'absolute';
            ohead[tabN].style.top = '';            
            ohead[tabN].style.bottom = '0';
        }
    }
   // console.log(sTop, oGlance[tabN].offsetHeight, oGlance[tabN].offsetTop, tabN)
}, false)

这是很久前的一个功能了，现在都已经不用了；最近比较闲，拿出来修改一下～只为学习。