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,160 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,250 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ź 434 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 278 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

1 odpowiedź 78 wizyt

bootstrap mobile menu

pytanie zadane 12 września 2023 w HTML i CSS przez niezalogowany

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

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci