Problem z sticky navbar.

pytanie zadane 13 stycznia 2016 w PHP przez Widemo Użytkownik (920 p.)
otagowane ponownie 13 stycznia 2016 przez Widemo

Witam kod ponizej generuje navabar wszystko dziala okej oprocz tego ze gdy zjade na stroni w dol to navbar przesuwa sie w prawo. Wszystko dostepne na stronie www.widemo.pl/main.php?page=1

<body>
	<div class="row">
		<div class="col-md-12">
			<nav id="sticker" class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<i style="color:#fff;" class="icon-th"></i>
					</button>
					<a class="navbar-brand" href="index.php">Coracko</a>
				</div>
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-left">
						<li>
							<a href="main.php?page=1">Top</a>
						</li>
						<li>
							<a href="main.php?page=1">News</a>
						</li>
						<li>
							<a href="main.php?page=1">Queue</a>
						</li>
						<li>
							<a href="main.php?page=1">Categories</a>
						</li>
					</ul>
					<?php
if(isset($_SESSION["user"])){
if(file_exists('users/'.$_SESSION['user'].'/profile/profile.png')){
$profile = 'users/'.$_SESSION['user'].'/profile/profile.png';
}else{
$profile = 'users/no_profile_img.png';
}			
require("poleczenie z baza");
$stmt = $db->query('SELECT * FROM users WHERE `login` = "'.$_SESSION['user'].'"');
foreach($stmt as $row);
?>
						<ul class="nav navbar-nav navbar-right">
							<li>
								<a href="file_type.php">
									<div style="text-align:center" class="icon-plus-6"></div>
								</a>
							</li>
							<li>
								<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					
									<img width="30px" height="30px" src="<?php echo $profile ?>" id="navbar_profile_image"/>
									<div style="matgin-left:20px;float:right;height:30px;width:50px;">
										<?php echo $row['login']; ?>
									</div>
									
								</a>
								<ul class="dropdown-menu">

									<li>
										<a href="profile.php">Profile</a>
									</li>
									<li role="separator" class="divider"></li>
									<li>
										<a href="logout.php">Log out</a>
									</li>
								</ul>
							</li>
						</ul>
						<?php $db = null; }else{ ?>
							<ul class="nav navbar-nav navbar-right">
								<li>
									<a href="index.php">Log in</a>
								</li>
								<li>
									<a href="register_form.php" style="background-color: #2780e3; color: #ffffff;">Sign up</a>
								</li>
							</ul>
							<?}?>
				</div>
			</nav>
		</div>
	</div>
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	<script>
		jQuery(document).ready(function($) {
			var navbar = $('#sticker'),
				distance = navbar.offset().top,
				$window = $(window);
			$window.scroll(function() {
				if ($window.scrollTop() >= distance) {
					navbar.removeClass('navbar-fixed-top').addClass('navbar-fixed-top');
					$("body").css("padding-top", "70px");
				} else {
					navbar.removeClass('navbar-fixed-top');
					$("body").css("padding-top", "0px");
				}
			});
		});
	</script>

1 odpowiedź

odpowiedź 13 stycznia 2016 przez ShiroUmizake Nałogowiec (46,300 p.)
edycja 13 stycznia 2016 przez ShiroUmizake

1.Po pierwsze masz za szeroką stronę :).(reguły na body)

  2. Wyłącz padding w klasie md-12.(jak to zrobić, musisz ręcznie wyedytować core bootstrapa ale ostrzegam to jest droga przez mękę).

2.Wyłącz klasę margin w klasie (navbar_right).(powinno pomóc , ale nie jestem pewny, czy gdzieś kolejna się nie załączy)

3. I tak coś Ci jeszcze emituje margines bodajże lewy.

4. Korzystaj z badania elementów jest to tak bardzo przydatne narzędzie, gdyż bezpośrednio modyfikując kod - widzisz odrazu zmiany :) oraz dziedziczenia (dośc istotne w bootstrapie, a właściwie w ogóle dośc istotne:)), dzięki temu udało mi się te 2 błędy.

5. Jeżeli chcesz , by navbar był pośrodku. Określ jego szerokość i nadaj margiensy prawy lewy auto (napewno jest od tego klasa), gdyż padding jest to tzw. margines węwnetrzny (jak żle pamiętam proszę mnie poprawić).

6. A teraz wytłumacz tego kwiatka:

   if ($window.scrollTop() >= distance) {

                    navbar.removeClass('navbar-fixed-top').addClass('navbar-fixed-top');

                    $("body").css("padding-top", "70px");

                } else {

                    navbar.removeClass('navbar-fixed-top');

                    $("body").css("padding-top", "0px");

                }

Rozumiem, że nadajesz klasę. OK. Ale po co dla body padding-top? Zabezpieczenie dla IE? :D

WAŻNE (Nie wiem czy to masz)

Jeżeli chcesz mieć resposywną stronę. Musisz, użyć przedrostków xs, itd. (żródło strony, pokazało że ich nie użyłeś).

Dokładne informacje znajdziesz tutaj: http://getbootstrap.com/css/.

komentarz 13 stycznia 2016 przez Widemo Użytkownik (920 p.)

Dzieki wielka za pomoc zaraz wszystko sprawdze a co do xs to wiem, ale to nie daje ze strona jest responsywane tylko ze np dany element jest widziany tylko na ekranach eXtra Small lub md MeDium a skrypt pisal kolega bo strone robimy razem