怎么制作图片加文字_电脑p图软件_p图软件抠图_照片抠图怎么抠_抠图怎么抠
当前位置:建站首页 > 新闻资讯 > 主机域名 >

导航栏追随着置顶实际效果,CSS打造出网页页面

发表日期:2021-04-07 16:40文章编辑:jianzhan浏览次数: 标签:    

在网页页面开发设计基本建设的全过程中,大家经常会必须采用那样的实际效果,例如说,某一坐落于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 
 }
 })
相关新闻

微网站应当如何设计方案

伴随着愈来愈多的客户应用手机微信顾客端,手机微信客户的数量也在持续的澎涨,许多商家...

日期:2021-02-03 浏览次数:114

初学者如何建立网站实例教程

伴随着互联网技术的日趋普及,每一年的上网人数持续增多,推动了电子器件商务的发展趋势...

日期:2021-01-20 浏览次数:108

微网站应当如何设计方案

伴随着愈来愈多的客户应用手机微信顾客端,手机微信客户的数量也在持续的澎涨,许多商家...

日期:2021-01-20 浏览次数:181

网站制作导航栏栏目有甚么区划根据

网页页面设计方案的技能有十分的多,在网页页面制做的每个细节都存在着设计方案的室内空...

日期:2020-12-09 浏览次数:185

织梦dedecms网站程序做网址导航大全站教程

好织梦cms网编在好长时间以前就使用过织梦cms模版做了导航栏网站了 长时间了有点儿忘掉了...

日期:2020-11-30 浏览次数:52

企业网站建设中导航栏控制模块怎样设计方案,

企业网站建设中导航栏控制模块怎样设计方案,怎样从客户视角设计方案网址导航控制模块呢...

日期:2020-09-23 浏览次数:143