1
Je suis en train de faire un site avec Fullpage.js & Twitter Bootstrap- et vous pouvez voir l'ensemble du site ici à ce url.collant barre de menu de navigation Bootstrap ne colle pas au sommet
Comme vous pouvez le voir lorsque vous faites défiler vers le bas, le menu de navigation se cache cependant que j'ai correctement utilisé la classe navbar-fixed-top.
Voici le code complet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="examples.css" />
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="examples.js"></script>
<!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
<title>Gooyanet</title>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#f2f2f2','#4BBFC3','#7BAABE','whitesmoke'],
css3: true
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="fullpage">
<div id="header">
<nav class="navbar navbar-default navbar-fixed-top" id="topMenu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#">Gooyanet</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">دنیای ای تی</a></li>
<li><a href="#">طراحی بازی</a></li>
<li><a href="#">طراحی اپلیکیشن</a></li>
<li><a href="#">سرویس پیام کوتاه</a></li>
<li><a href="#">برنامه نویسی ویندوز</a></li>
<li><a href="#">وب هاستینگ</a></li>
<li><a href="#">طراحی سایت</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User Menu <span class="caret"></span></a>
<ul class="dropdown-menu menu1">
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Forgot Something?</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="section">
<div class="slide"><img src="images/image-slide-one.jpg" width="100%" height="100%" style=""/></div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</div>
<div class="section">
asdsad
<br /><br />
</div>
<div class="section">Sction 2</div>
<div class="section">Sction 3</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Notez que cela fonctionne très bien sans les fullpage.js plug-in mais je dois utiliser les deux ensemble. Alors, avez-vous une solution à cela?
J'ai désactivé tous les css de fullpage.js, et il enlève encore la barre de navigation après qu'elle soit en-dessous de l'en-tête. Ouvrez vos outils de développement, sélectionnez la div 'en-tête' et jouez avec le css pour savoir ce qui fonctionne! Une fois que vous trouvez tout ce qui désactive le 'static', éditez vos fichiers CSS en miroir. –