基于jQuery页面滚动的顶部导航显示隐藏

本文演示了jQuery滚动时顶部导航显示的隐藏效果代码,供大家参考:

运行效果的截图如下:


具体代码如下:

介绍核心文件








构建HTML,margint,它是建立在以div出现滚动条,没有实际作用。




这是顶部导航条
滚动查看效果滚动



写CSS




。顶部标题{背景:# e74c3c;颜色:白色;字体大小:24px;填充:5px;文本对齐:中心;位置:固定;左:0;最高:0;宽度:100%;过渡:,};}
。隐{顶:- 90px;}
顶:0。显示{;Z指数:9999;}



过渡:top.5s是最高头衔的定义;它是指在the.5s动画时间的前方向值的变化。如果加上隐藏的类,最高头衔将缓冲0动画上- 90px在0.5秒之内。

写js




$(函数(){())
无功winheight = $(document)的ScrollTop();

$(窗口)。滚动(函数(){)
无功scrolly = $(document)(。scrollTop); / /得到垂直滚动的距离,即滚动数

如果(scrolly > 550){ / /如果滚动距离大于550px隐藏或删除隐藏类
$('。最高头衔的)。AddClass('hiddened);
}
{其他
$('。最高头衔的)。RemoveClass('hiddened);
}

如果(scrolly > winheight){ / /如果没有滚动到顶部,删除或添加显示类型
$('。最高头衔的)。RemoveClass('showed);
}
{其他
$('。最高头衔的)。AddClass('showed);
}

});
});


以上是一个基于jQuery的总体思路,实现网页滚动时的顶部导航显示和隐藏。我希望你能沿着这种方式完成导航和隐藏效果。谢谢你的阅读。