Bootstrap i przyklejane menu

pytanie zadane 6 lutego 2017 w JavaScript przez hiper007 Stary wyjadacz (11,270 p.)
zamknięte 28 marca 2017 przez hiper007

Witam oto kod

$(document).ready(function() {   
var stickyNavTop = $('#menu').offset().top;   

var stickyNav = function(){   
var scrollTop = $(window).scrollTop();   

if (scrollTop > stickyNavTop) {       
$('#menu').addClass('sticky');  
 } else {      
$('#menu').removeClass('sticky');    
}  
};   

stickyNav();  

$(window).scroll(function() {      

stickyNav();  
 });   
 });

Dolaczona klasa sticky

 .sticky
{
	width:100%;
	position:fixed;
	top:0;
	z-index:100;
}

oraz umieszczony id (menu)

<div class="row">
<div  id="menu" class="navbar navbar-default" style=" background: linear-gradient( 90deg ,green,royalblue ); color: black;">

<div class="conteiner-fluid">

<div class="navbar-header" style="margin-top:-5px;">
<button style="margin-top:12px;"  type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a class="navbar-brand" href="#"><span style="font-weight:bold; color:black;"><img src="img/logo.jpg" width="35px" height="35px"/> Agritek </a>

</div>


<div class="collapse navbar-collapse" id="mynavbar-content">

<div class="nav navbar-nav">

<li id="link1"><a href="#">Zdjęcia</a></li>
<li id="link2"><a href="#">Ksero</a></li>
<li id="link3"><a href="#">Pieczątki</a></li>
<li id="link4"><a href="#">Bindowanie</a></li>
<li id="link5"><a href="#">Laminowanie</a></li>
<li id="link6"><a href="#">Reklama</a></li>
<li id="link7"><a href="#">Wizytówki</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="link12">Nadruki</span><b class="caret"></b></a>
<ul class="dropdown-menu">

<li id="link8"><a href="#">Nadruki na odzieży</a></li>
<li id="link9"><a href="#">Nadruki na płytach CD i DVD</a></li>


</ul>
</li>

<li id="link10"><a href="#">Przegrywanie VHS na DVD</a></li>
<li id="link11"><a href="#">Kontakt</a></li>


</div>

</div>

</div>

</div>

</div>

tak wyglada menu

a tak jak zaczynam scrollowac

menu dochodzi do końca ekranu po prawej stronie a powinien do konca zielonego pola. Co musial bym zmienic zeby to naprawic...

komentarz zamknięcia: Problem rozwiązany

1	komentarz 6 lutego 2017 przez radek024 Szeryf (77,860 p.) Maz gotową klasę: navbar-fixed-top, a poza tym - gradienty używano jakieś 12 lat temu..

4 odpowiedzi

odpowiedź 6 lutego 2017 przez skav3n Gaduła (3,900 p.)
wybrane 28 marca 2017 przez hiper007

odpowiedź 6 lutego 2017 przez hoktaur Pasjonat (22,310 p.)

Żeby to zrobić musisz użyć sztuczki (podpowiem że kluczowa jest linia 12-13 i odpowiednio zamykające tagi) reszta skopiowana z przykładowego nav-bara:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="height:1500px">
<div class="navbar-fixed-top">
<nav class="navbar navbar-inverse container">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
</div>
  
<div class="container" style="margin-top:50px">
  <h3>Fixed Navbar</h3>
  <div class="row">
    <div class="col-md-4">
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>    
    </div>
    <div class="col-md-4"> 
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
    </div>
    <div class="col-md-4"> 
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p> 
    </div>
  </div>
</div>

<h1>Scroll this page to see the effect</h1>

</body>
</html>

odpowiedź 6 lutego 2017 przez Mikołaj Kawczynski Dyskutant (9,160 p.)

odpowiedź 6 lutego 2017 przez mordimer Mądrala (5,720 p.)

Witam jakbyś np tu https://jsfiddle.net/ to wstawił to było by łatwiej a tak nikomu się nie chce tego uruchamiać... ale tak jak patrze to problemem jest to że dodajesz klase sticky z position:fixed na 100% szerokości okna w tym przypadku daj jeszcze left:0 to zobaczysz to ... a rozwiązaniem jest dodanie marginesu takiego samego jaki ma ten div na dole czyli 15px jak zakładam ... ale widzę też że stosujesz klasy bootstrapa a nie wiesz za bardzo co tez one robią bo takie cos:

nie jest to poprawne bo:

<div class="container-fluid">
  <div class="row">
    ...jakis kod
  </div>
</div>

tak sie zagnierzadza te dwa divy w bootsrapie bo domyślnie container-fluid ma 15px padding a klasa row margin:-15px

Podobne pytania

0 głosów

1 odpowiedź 59 wizyt

Bootstrap - drop menu w czystym css i htmlu nie działa.

pytanie zadane 30 listopada 2022 w HTML i CSS przez ptomeccc Użytkownik (800 p.)

0 głosów

2 odpowiedzi 246 wizyt

Bootstrap 3, marginesy i edycja koloru menu

pytanie zadane 2 czerwca 2016 w HTML i CSS przez Ziuziek Mądrala (5,140 p.)

0 głosów

0 odpowiedzi 84 wizyt

Bootstrap stylizacja menu oraz wyszukiwarki

pytanie zadane 10 czerwca 2022 w HTML i CSS przez Sic Dyskutant (8,510 p.)

Bootstrap i przyklejane menu

Zaloguj lub zarejestruj się, aby skomentować.

4 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

Fanpage na Facebooku

Cenne informacje

Polecane miejsca w sieci