CSS下拉菜单是网站和应用程序中常用的一种导航方式,但有时候用户下拉菜单时菜单会随着用户的滚动页面而移动,这样会影响用户的体验。那么,我们该如何固定CSS下拉菜单呢? 首先,我们需要给下拉菜单的父元素
.parent{ position:fixed; top:50px; /*菜单距离顶部的距离*/ left:0; }
.dropdown-menu{ position:absolute; top:100%; /*菜单距离父元素顶部的距离*/ left:0; }
.parent{ position:fixed; top:50px; /*菜单距离顶部的距离*/ left:0; z-index:999; } <br> .dropdown-menu{ position:absolute; top:100%; /*菜单距离父元素顶部的距离*/ left:0; z-index:999; }
$(document).ready(function(){ $('.dropdown-toggle').on('click',function(){ $('.dropdown-menu').toggleClass('fixed'); }); });
.dropdown-menu.fixed{ position:fixed; }
粉丝
0
关注
0
收藏
0