头部菜单栏悬浮不动

最后更新:    浏览次数: 185

        在开发网站的时候经常会遇到下拉菜单栏的时候菜单栏还是停留在那里不消失,这就是运用到了position属性。position属性下的sticky和fixed这两个参数可以达到这个效果,但是有一些区别。

区别:

sticky:

        可以使用参数,是位置跟relative使用参数的效果是一致的,都是相对于static的变化;sticky具有“滚动机制”。sticky定位可以被认为是relative和fixed的混合。粘性定位的元素被视为相对定位,直到它超过指定的阈值,此时它被视为固定的,直到它到达其父母的边界。

fixed:

  相对于视口定位,不管视口如何滚动,它的位置始终不变,而sticky则是在目标区域内随着页面的滚动而滚动,超出这个区域后就跟fixed一样不管视口如何滚动位置始终不变。

如何使用:

sticky:

说明:我们已经把sticky进行了封装,只要在class里设置sticky-top就可以达到效果了。只要设置了sticky菜单栏就会全程的悬浮不动。

代码:<nav class="navbar  navbar-expand-xl sticky-top"></nav>

fixed:

说明:我们已经把flxef进行了封装,只要加上data-fixed和data-offset="100"就可以达到效果了。一旦达到了data-offset设置的值,头部菜单栏就会出现而且悬浮不动,没有达到的话哪个菜单栏还是会隐藏的。设置这个class(fixed-effect)就可以做到出现的颜色等一些变化了。

代码:<nav class="navbar  navbar-expand-xl" data-fixed data-offset="100"></nav>

电子邮件
info@zmpress.com
热线电话
+86 13587721433
微信关注
WeChat
在线客服
在线询盘
顶部