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

前端 625
10个月前
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 自动为新文章添加已使用过的历史标签非插件版

每当我们写文章的时候,都需要手动给 WordPress 文章添加标签,这样既能给访问者明确这篇文章的…

313
3个月前
评论神器一键自动填写昵称、邮箱和网址

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

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

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

207
4个月前

共有0条评论

评论本文