Sabit Panel

JQuery-tr Wiki sitesinden

Git ve: kullan, ara

Sayfa kaydıkça endisi de kayan bir panel bazen çok işe yarar.

İlk olarak panelin genel tasarımı: 

<style type="text/css">
<style type="text/css">
#kayanPanel{
        top:50px; 
	left:150px;
        background-color:#525252; 
	color:#369; 
        padding:5px; 
	position:absolute; 
 
	}
#anaKapsayici{
       height:4000px;
       width:750px;       
       background-color:#efefef;
}
</style>

Kayan panelin konumu absolute olarak istediğimiz gibi ayarlandı. Ardından bu panelin sayfa kaydıkça kayması için gerekli JQuery kodu yine head tagı arasına eklenir. 

    <script type="text/javascript">
      var alan = "#kayanPanel";
      var uzunluk = null;
      $(document).ready(function(){
	      uzunluk = parseInt($(alan).css("top").substring(0,$(alan).css("top").indexOf("px")))
	      $(window).scroll(function () { 
		      offset = uzunluk+$(document).scrollTop()+"px";
		      $(alan).animate({top:offset},{duration:300,queue:false});
	      });
      }); 
    </script>


body tagı içinde ise panelimizi örnek olarak şu şekilde konumlandırırız. 

<center>
  <div id="anaKapsayici" ></div>
  <div id="kayanPanel">
  Kayan içerik.. mesela bir menü.
</div>
</center>
"http://wiki.jquery-tr.com/Sabit_Panel" adresinden alındı.