• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Bootstrap i przyklejane menu

VPS Starter Arubacloud
+1 głos
1,205 wizyt
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,180 p.)

Maz gotową klasę: navbar-fixed-top, a poza tym - gradienty używano jakieś 12 lat temu..

4 odpowiedzi

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

Możesz użyć Bootstrap Affix do przyklejenia menu

https://jsfiddle.net/DTcHh/29401/

+1 głos
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>

 

0 głosów
odpowiedź 6 lutego 2017 przez Mikołaj Kawczynski Dyskutant (9,160 p.)
Dać padding-right na 50%
0 głosów
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:

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

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ź 395 wizyt
pytanie zadane 30 listopada 2022 w HTML i CSS przez ptomeccc Użytkownik (800 p.)
0 głosów
2 odpowiedzi 270 wizyt
pytanie zadane 2 czerwca 2016 w HTML i CSS przez Ziuziek Mądrala (5,140 p.)
0 głosów
1 odpowiedź 74 wizyt
pytanie zadane 12 września 2023 w HTML i CSS przez niezalogowany

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...