发表于: 2017-05-18 22:25:34

1 922


完成的事情:

桌游精灵遗留手机端后退按钮相关bug,测试app功能并打包给测试。

听老大一堂关于代码结构的课。

写了回家学习官网方案并进行评审

禅道拆分了需求


计划的事情:

正式开始回家学习官网,例如psd图的资料整理,导航栏,模块间切换的代码。


问题:

研究了一下下那个“导航条移动到顶部时候固定在顶部”的方法,原来是在想,纯css如何解决?

想半天没有结果,只好百度。

看到了基本使用js代码进行处理,首先就滚动条事件,果然。。。

然后经过测试,试出下面的代码来:

首先吧,先拿出需要定位的导航条上面图片的高度,然后判断滚动条位置是否大于等于其高度,做出相应处理。。

其实还有很多种方法,这里就先用这种吧。

var $img = $('#img');

var imgHeight = $img.height();

$(window).scroll(function(){

    var $body = $('body:first');

    var scrollPosition = $body.scrollTop();

    var $top = $('#top');

    if(scrollPosition >= imgHeight){

        $top.css('position','fixed');

        $body.css('padding-top','21px');

    }else{

        $top.css('position','relative');

        $body.css('padding-top','0');

    }

})

    

收获:

加深mvc模型的概念,方便维护的代码的结构。



返回列表 返回列表
评论

    分享到