HTML'de bunu nasıl yapıyoruz?

17-05-2015, 02:57:39

#1

Birsaniye

Merhaba beyler,

Örnek olarak startv.com.tr'yi vereyim, bi kaç gündür yapmaya çalıştığım bi şey var ama bi türlü bulamadım nasıl yapılacağını.

Yukardaki divi css kodlarında position:fixed ve top:0'la sabitliyoruz ancak yapmaya çalıştığım şey tam olarak bu değil.

Yukarıda iki farklı div var ilki aşağıya inerken kayboluyor ama üstteki sayfayı kaydırırken yukarıya geldiğinde sabit kalacak, yardımcı olabilecek var mı bu konuda?
17-05-2015, 03:08:12

#2

Nolpe
Selamlar; diyelim ilk div header olsun
```
<div class="header">
header
</div>
```
daha sonra fix div oluşturalım;
```
<div id="nav">

fix div bölümü..
</div>
```
css kodlarımız:
```
#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:23532;
	height:45px;
	border-bottom:1px solid #222;
	
}
```
javascript kodlarımız
```
<script>
$('#nav').affix({
      offset: {
        top: $('.header').height()
      }
});	

</script>
```
Tabi jquery ve bootstrap kütüphanesini çağırdıktan sonra js'yi ekleyelim.

Bu kodlar ile header'dan sonra nav fix olarak ekranda görünecektir. Hazırlayamazsanız bir örnek ile upload yapabilirim.

Teşekkürler.
17-05-2015, 04:13:05

#3

Birsaniye
Nolpe adlı üyeden alıntı: mesajı görüntüle
Selamlar; diyelim ilk div header olsun

<div class="header"> header </div>
daha sonra fix div oluşturalım;

<div id="nav" class="affix"> fix div bölümü.. </div>
css kodlarımız:

#nav.affix { position: fixed; top: 0; width: 100%; z-index:23532; height:45px; border-bottom:1px solid #222; }
javascript kodlarımız

<script> $('#nav').affix({ offset: { top: $('.header').height() } }); </script>
Tabi jquery kütüphanesini çağırdıktan sonra js'yi ekleyelim.

Bu kodlar ile header'dan sonra nav fix olarak ekranda görünecektir. Hazırlayamazsanız bir örnek ile upload yapabilirim.

Teşekkürler.
Jquery bilmiyorum hocam sıkıntım o benim, nasıl yapıyoruz çağırma işini.

17-05-2015, 09:27:44

Yalnızca css ile keşke yapılabilse ki belki yapılabiliyordur emin değilim. Çünkü şu sıralar css3 ile epey yeni özellik geldi bilmediğimiz şeyler olabilir yani. Küçük bir javascript kodu ile hazırladım bir sayfa aşağıda.

.html uzantılı kaydedip sonucu görebilirsin tam senin istediğin sayfa. menüleri vs rastgele ayarladım düzenlemelerini yaparsın zaten

<!doctype html>

<html lang="tr">
<head>
  <title>Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="description" content="description">
  <meta name="author" content="SitePoint">
  <meta name="keywords" content="keywords">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript">
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
 
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
      
if (scrollTop > stickyNavTop) { 
    $('.nav').addClass('sticky');
} else {
    $('.nav').removeClass('sticky'); 
}
};
 
stickyNav();
 
$(window).scroll(function() {
    stickyNav();
});
});
  </script>
  <style type="text/css">
  body {
	margin:0;
	padding:0;
  }
.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
}

/* HEADER */
.header {
	background-color:#333;
}
.header a {
	display:block;
	color:#888;
	text-decoration:none;
	padding:5px;
	transition:all .2s ease-in-out;
	font-family: tahoma;
	font-size:13px;
	border-bottom:1px solid #555;
	text-align:center;
}
.header ul {
	display:block;
	margin:0;
	padding:0;
}
.header ul li {
	list-style:none;
	display:block;
	margin:0;
	padding:0;
}
.header a:hover {
	transition:all .2s ease-in-out;
	background-color: #db3b2a;
	color:#fff;
}


/* NAVBAR */

.nav {
	background-color:#111;
}
.nav a {
	display:block;
	color:#fff;
	text-decoration:none;
	padding:15px;
	transition:all .2s ease-in-out;
	font-family: tahoma;
	font-size:13px;
	border-right:1px solid #333;
}
.nav ul {
	display:block;
	margin:0;
	padding:0;
}
.nav ul li {
	list-style:none;
	float:left;
	display:block;
}
.nav a:hover {
	transition:all .2s ease-in-out;
	background-color: #db3b2a;
}
.cle {
	clear:both;
}
  </style>
</head>
<body>
	
	

    <div class="header">
		<ul>
			<li><a href="">Yukarıda kaybolacak alan</a></li>
			<li><a href="">Menü 2</a></li>
			<li><a href="">Menü 3</a></li>
		</ul>
		<div class="cle"></div>
    </div>
    <div class="nav">
		<ul>
			<li><a href="">Sabitlenen alan</a></li>
			<li><a href="">Menü 2</a></li>
			<li><a href="">Menü 3</a></li>
		</ul>
		<div class="cle"></div>
    </div>
    
	
	
        <p>Sayfa içerik kısmı 1... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
		<p>Sayfa içerik kısmı... <br /><br /><br /><br /><br /><br /><br /><br /></p>
    

	
</body>
</html>

17-05-2015, 12:44:54

Nolpe

Birsaniye adlı üyeden alıntı: mesajı görüntüle

Jquery bilmiyorum hocam sıkıntım o benim, nasıl yapıyoruz çağırma işini.

Selamlar, çok basit bir örnek hazırladım. Resimden sonra menü fixleniyor.

http://nolpe.com/project/fixdiv/

Kaynak kodu; aşağıda. Bu kodla http://nolpe.com/project/fixdiv/bootstrap.min.js şu linkteki dosyayı aynı klasörde barındırırsan çalışacaktır.

Saygılar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Fix Div</title>
</head>

<body>

<style>

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:23532;
	height:45px;
	border-bottom:1px solid #222;
	background:#ddd;
	margin:0 auto; display:table;
	
}

#nav {height:45px; width:100%; border:1px solid #222; background:#ddd;}

.orta {width:50%; margin:0 auto; display:table; font-size:30px;}
.header {margin:0 auto; display:table; width:50%;}

</style>
<div class="header">
<img src="http://img.bleacherreport.net/img/images/photos/003/132/164/hi-res-f79f64ff6d413fc9c45bcdadead1362e_crop_north.jpg?w=630&h=420&q=75" />
</div>

<div id="nav">
 
fix div bölümü..
</div>


<div class="orta">

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.

</div>

</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$('#nav').affix({
      offset: {
        top: $('.header').height()
      }
});   
 
</script>

17-05-2015, 15:16:59

#6

Birsaniye

Arkadaşlar çok saolun.