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

前端 294
5个月前

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 获取文章内所有图片

将下列代码添加至functions.php function hui_get_thumbnail( …

122
3个月前
WordPress 不同分类使用不同的文章模板

方法一:根据模板文件名进行判断 1.将下面的代码添加到当前主题的 functions.php 文件:…

140
3个月前
WordPress 纯代码实现外链跳转

第一步、新建go文件夹和index.php 新建一个go文件夹,然后在里面加一个index.php,…

167
3个月前

共有0条评论

评论本文