WordPress 导航栏制作 滚动固定顶部

前端 467
8个月前

html 代码:


<div id="fixedMenu">
    <ul>
        <li><a href="#" target="_blank" rel="noopener noreferrer">.NET</a></li> 
        <li><a href="#" target="_blank" rel="noopener noreferrer">Javascript</a></li> 
        <li><a href="#" target="_blank" rel="noopener noreferrer">jQuery</a></li> 
    </ul>
</div>

js 代码:


$(function() {
    var ie6 = document.all;
    var dv = $('#fixedMenu'),
    st;
    dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离 
    $(window).scroll(function() {
        st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
        if (st &gt; parseInt(dv.attr('otop'))) {
            if (ie6) { //IE6 不支持 fixed 属性,所以只能靠设置 position 为 absolute 和 top 实现此效果 
                dv.css({
                    position: 'absolute',
                    top: st
                });
            } else if (dv.css('position') != 'fixed') dv.css({
                'position': 'fixed',
                top: 0
            });
        } else if (dv.css('position') != 'static') dv.css({
            'position': 'static'
        });
    });
});
标签: ,

相关文章

评论神器一键自动填写昵称、邮箱和网址

适用WordPress、Typecho、ZBlog、Emlog、多说等平台的评论神器 javascr…

117
1个月前
WordPress 利用sql命令批量修改友情链接全部在新窗口打开

登陆数据库,然后执行 sql 命令: UPDATE Wp_links SET link_target…

86
1个月前
WordPress 网站优化加速

wodpress安装好后,为了适应国内网络环境,有些东西需要调整或是移除,可以有效的提高访问速度,主…

135
2个月前

共有0条评论

评论本文