PDA

View Full Version : فیکس کردن یک دایو در بالای صفحه


IMANAZADI
پنج شنبه 22 بهمن 1394, 15:54 عصر
با سلام


من با استفاده از div و استایل های display:table , display:table-row; , display: table-cell; یک جدول درست کردم

حالا میخوام سطر اول جدول یا همون div با آی دی header زمانیکه صفحه اسکرول میخوره ، فیکس بشه ( position:fix)

هر کاری کردم نشد ، قالب بهم میریزه

این نکته رو بگم نمیخوام استایل های فعلی تغییر کنند منظورم کلاس a,b,c میخوام جدولم با دایو باشه نه با تگ table , ...





<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>




<style>


.a
{
display:table;
}


.b
{
display:table-row;
}
.c
{
display: table-cell;
height:25px;
text-align:center;
vertical-align:middle;
width:180px;
border: solid 1px #000000;
}




</style>
</head>


<body>


<div style=" width:900px; margin:0 auto; border: solid 1px; background-color:#CFEBF9;">


<div >


<div id="header" class="a" style="background-color:#A996DD;">




<div class="b">
<div class="c">titleA</div>
<div class="c">titleB</div>
<div class="c">titleC</div>
</div>


</div>
<div class="a">




<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>




<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


</div>




</div>


</div>




</body>
</html>




دوستان کارم خیلی لنگ این قضیه هست

خیلی هم وقت گذاشتم و سرچ کردم چیزی پیدا نکردم
IMANAZADI
شنبه 24 بهمن 1394, 08:28 صبح
جواب و خودم پیدا کردم
جهت دوستانی که اگر همچین مشکلی دارند




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>




<style>


.a
{
display:table;
}


.b
{
display:table-row;
}
.c
{
display: table-cell;
height:25px;
text-align:center;
vertical-align:middle;
width:180px;
border: solid 1px #000000;
}


.fixcls{position:fixed; top:0; z-index:100;}

.rel{ position:relative; top:29px;}
</style>
</head>


<body onClick="df(event);">


<div style=" width:900px; margin:0 auto; border: solid 1px; background-color:#CFEBF9;">


<div id="test">


<div id="fix">
<div id="header" class="a" style="background-color:#A996DD;">


<div class="b">
<div class="c">titleA</div>
<div class="c">titleB</div>
<div class="c">titleC</div>
</div>


</div>


</div>


<div id="ff" class="a">




<div class="b">
<div class="c">aa</div>
<div class="c">bb</div>
<div class="c">cc</div>
</div>


<div class="b">
<div class="c">aaa</div>
<div class="c">bbb</div>
<div class="c">ccc</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>




<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>
<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


<div class="b">
<div class="c">a</div>
<div class="c">b</div>
<div class="c">c</div>
</div>


</div>




</div>


</div>




</body>
<script>


function df(e)
{
alert(e.clientY);
}


window.onscroll=function(){
var x=document.getElementById('test').offsetTop;


if(window.pageYOffset>=x)
{
document.getElementById('fix').classList.add('fixc ls');
document.getElementById('ff').classList.add('rel') ;

}
else
{

document.getElementById('fix').classList.remove('f ixcls');
document.getElementById('ff').classList.remove('re l');
}


}




</script>
</html>