我有此代码：
.navbar-default .navbar-nav>li>a {
width: auto;
/* width: 200px;*/
/* font-weight: bold;*/
}
.mega-dropdown {
position: static !important;
/* width: 100%;*/
}
.mega-dropdown-menu {
padding: 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 300;
line-height: 1.428571429;
color: #243C78;
white-space: normal;
}
.mega-dropdown-menu .dropdown-header {
color: #243C78;
font-size: 18px;
font-weight: 500;
}
.mega-dropdown-menu form {
margin: 3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}<section class="indexTop">
<div class="container">
<div class="row indexTopPadding">
<div class="col-xs-8 col-sm-12 col-md-12 col-lg-11 ">
<div class="topData">Poniedziałek, 11 października 2019</div>
</div>
<div class="col-xs-4 col-sm-12 col-md-12 col-lg-1">
<div class="topKontrast">
<a href="#"><img src="images/ikon2.png" class="img-responsive topIkonLeft topIkonLeft5"></a>
<a href="#"><img src="images/ikon1.png" class="img-responsive topIkonLeft topIkonLeft5"></a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 topMargin15 visible-xs">
<div class="topSocialMedia">
<a href="#"><img src="images/ikon7.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR"></a>
<a href="#"><img src="images/ikon3.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR"></a>
<a href="#"><img src="images/ikon4.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR"></a>
<a href="#"><img src="images/ikon5.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR"></a>
<a href="#"><img src="images/ikon6.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR"></a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-5 topMargin30R ">
<div class="logo">
<a href="#"><img src="images/logo.png" class="img-responsive ikonCenterR"></a>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 topMargin10 hidden-xs">
<form method="post" name="contactformXX" class="form validate clearfix validate-form">
<div class="form-group ">
<div class="form-group has-feedback ">
<input type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" /> <span class="glyphicon glyphicon-search form-control-feedback glyphiconColor"></span> </div>
</div>
</form>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 topMargin15 hidden-xs">
<div class="topSocialMedia">
<a href="#"><img src="images/ikon7.png" class="img-responsive topIkonLeft topIkonLeft10"></a>
<a href="#"><img src="images/ikon3.png" class="img-responsive topIkonLeft topIkonLeft10"></a>
<a href="#"><img src="images/ikon4.png" class="img-responsive topIkonLeft topIkonLeft10"></a>
<a href="#"><img src="images/ikon5.png" class="img-responsive topIkonLeft topIkonLeft10"></a>
<a href="#"><img src="images/ikon6.png" class="img-responsive topIkonLeft topIkonLeft10"></a>
</div>
</div>
</div>
</div>
</section>
<!-- END TOP-->
<!-- MENU-->
<div class="paddingMenuTop"></div>
<nav class="navbar navbar-default navbarDefaultMop ">
<div class="container">
<!-- navbar-fixed-top -->
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand visible-xs" href="#">MegaMenu</a></div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown menuMop"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Item xxx1</a>
<ul class="dropdown-menu mega-dropdown-menu row dropdownMenuMop">
<div class="container topMenuColor">
<li class="col-sm-3">
<ul class="hideBullet">
<li class="dropdown-header hideBullet">Sprawy </li>
<li><a href="#" class="formattopMenuItems">pozycja 1</a></li>
<li><a href="#" class="formattopMenuItems">pozycja 2</a></li>
<li><a href="#" class="formattopMenuItems">pozycja 3</a></li>
<li><a href="#" class="formattopMenuItems">pozycja 4</a></li>
<li><a href="#" class="formattopMenuItems">pozycja 5</a></li>
<li class="dividerMop"></li>
<li class="dropdown-header hideBullet">pozycje 5</li>
<li><a href="#" class="formattopMenuItems">Bezpłatana imnformaja</a></li>
<li><a href="#" class="formattopMenuItems">dream</a></li>
<li><a href="#" class="formattopMenuItems">Callendar</a></li>
<li><a href="#" class="formattopMenuItems">Archiwum Mewspow</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul class="hideBullet">
<li class="dropdown-header hideBullet">My life </li>
<li><a href="#" class="formattopMenuItems">Health</a></li>
<li><a href="#" class="formattopMenuItems">Bicycles</a></li>
<li><a href="#" class="formattopMenuItems">Cars</a></li>
<li><a href="#" class="formattopMenuItems">Education</a></li>
<li><a href="#" class="formattopMenuItems">Cash</a></li>
<li class="dividerMop"></li>
<li class="dropdown-header hideBullet">Fundation</li>
<li><a href="#" class="formattopMenuItems">xdcsdcsd cdscdscds</a></li>
<li><a href="#" class="formattopMenuItems">Magazine</a></li>
<li><a href="#" class="formattopMenuItems">Items</a></li>
<li><a href="#" class="formattopMenuItems">Items2</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul class="hideBullet">
<li class="dropdown-header hideBullet">My life </li>
<li><a href="#" class="formattopMenuItems">Health</a></li>
<li><a href="#" class="formattopMenuItems">Bicycles</a></li>
<li><a href="#" class="formattopMenuItems">Cars</a></li>
<li><a href="#" class="formattopMenuItems">Education</a></li>
<li><a href="#" class="formattopMenuItems">Cash</a></li>
<li class="dividerMop"></li>
<li class="dropdown-header hideBullet">Fundation</li>
<li><a href="#" class="formattopMenuItems">xdcsdcsd cdscdscds</a></li>
<li><a href="#" class="formattopMenuItems">Magazine</a></li>
<li><a href="#" class="formattopMenuItems">Items</a></li>
<li><a href="#" class="formattopMenuItems">Items2</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Accessories</li>
<li><a href="#">Default Navbar</a></li>
<li><a href="#">Lovely Fonts</a></li>
<li><a href="#">Responsive Dropdown </a></li>
<li class="dividerMop"></li>
<li class="dropdown-header">Newsletter</li>
<form class="form" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email"> </div>
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</form>
<li class="dropdown-header">zamknij mnie2
<button type="button" class="close">×</button>
</li>
</ul>
</li>
</div>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</nav>
菜单（NAVBAR）有问题。
我希望它随着向下滚动页面（停留在浏览器顶部）而下降。
我想得到的效果在这里：https://www.gdynia.pl 达拉·密斯卡坎科（Dlamieszkańców），阿克塔努诺西（aktualności），杜拉·图里斯托（dlaturystów），格丁（o Gdyni），
有人知道如何改进我的代码以获得这种效果？ 审查：http://serwer1356363.home.pl/pub/menu_fixed/
答案 0 :(得分：0)
您可以向.navbar添加其他样式如下的类： position：fixed; top：0; 和用 position：fixed; 替换 position：relative 。 -仅在向下滚动一些像素后添加此类。 -如果您没有滚动某些像素，请使用remove或不添加类。 -使用Javascript或JQuery检测已经滚动像素的用户数量，并添加或删除元素类。 我认为这里一切都清楚了。我刚刚打开您的网站，并使用chrome开发工具来查看应用效果。只是玩代码和样式。之后，应用真实代码进行更改。 您可以在此处查看更多信息：set div position to fixed after scrolling 100px?