新闻中心 网络推广 网站建设 优化推广

导航追随置顶效果,CSS打造网页下滑时永远在顶部

时间:2019-12-21   来源:本站

在网页开发建设的过程中,我们常常会需要用到这样的效果,比如说,某个位于BANNER下面的多个二级横向导航在网页下滑到一定程序的时候,让这个二级导航永远置于顶部显示,以方便快速切换栏目。又或者是在下没有过的时候,一级菜单也永远置于顶部,永远显示。

深圳黑马视觉在网站建设过程中,总结了很多比较实用简单的代码,下面是我们针对以上效果的一种醉简单方便的处理。

手先,我们的要定位的菜单使用样式:.pc_nav_box,你也可以命名为其他的类。只是保持一致就可以了。

然后引入JQ,版本好像不怎么限制。随便哪一个吧。

第三步:使用我们下面的代码。

CSS大概的意思是以这个DIV一个FIXED属性,然后永远在TOP为0的位置,背景给了黑色。

JS的意思是下滑大于105的时候,添加topcur这个属性,就实现了我们想要的效果。


 <style type="text/css">.topcur{top: 0px; position: fixed; background-color: rgb(0, 0, 0);}</style>
 
      <script type="text/javascript">           

$(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()>=105){
            $('.pc_nav_box').addClass('topcur');
        }
        else{
            $('.pc_nav_box').removeClass('topcur');
        }
    })
});




        </script>


QQ截图20191226121924.jpg

新闻推荐
龙华网站建设多少钱?
龙华网站建设多少钱?

大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...

龙华外贸网站建设必需知道的四大注意事项
龙华外贸网站建设必需知道的四大注意事项

在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...

2H4G的服务器CPU一直100%,查询原因竟让人哭笑不得。
2H4G的服务器CPU一直100%,查询原因竟让人哭笑不得。

最近在维护一台服务器的时候发现这台服务器CPU一直在99%到100%。服务器上运行的网站不多,也才3个.一开始怀...

pbootcms后台增加多编辑器字段,可以随意增加多个编辑器
pbootcms后台增加多编辑器字段,可以随意增加多个编辑器

可以后台创建“多编辑器”字段,然后可以添加第一天、第二天、第三天行程之类的,看截图:注意:1、改修改需...

Top