Фиксация шапки
Как зафиксировать шапку вот такой таблицы на jquery
<ul class="empty_legs_full_list_head stick">
<li><span>название</span></li>
<li>дальность полёта, <i>км</i></li>
<li><i>max</i> крейсерская<br>скорость, <i>км/ч</i></li>
<li><span><i>max</i> число<br>пассажиров</span></li>
<li><p>внутренние размеры (салон), <i>м</i></p><p><span class="l">длина</span> <span class="w">ширина</span><span class="h">высота</span></p></li>
<li>заказ</li>
</ul>
<ul class="empty_legs_full_list">
<li class="empty_legs_full_list_item">
<ul>
<li><a href="/planes/citation-mustang/">Citation Mustang</a></li>
<li>
<span>2 130</span>
<div class="scale_back_lit">
<div class="scale_blue_lit scale_tail_lit"></div>
<div class="scale_blue_lit scale_center_lit" style="width: 12.158284480098734%;"></div>
<div class="scale_blue_lit scale_head_lit"></div>
</div>
</li>
<li>630</li>
<li>5</li>
<li>2,97</li>
<li>1,40</li>
<li>1,37</li>
<li><a href="#" class="order_flight_lit"></a></li>
</ul>
<div class="planes_item_bg"></div>
</li>
<li class="empty_legs_full_list_item">
<ul>
<li><a href="/planes/citation-cj1-plus/">Citation CJ1+</a></li>
<li>
<span>2 408</span>
<div class="scale_back_lit">
<div class="scale_blue_lit scale_tail_lit"></div>
<div class="scale_blue_lit scale_center_lit" style="width: 13.745140388768899%;"></div>
<div class="scale_blue_lit scale_head_lit"></div>
</div>
</li>
<li>785</li>
<li>5</li>
<li>3,35</li>
<li>1,47</li>
<li>1,45</li>
<li><a href="#" class="order_flight_lit"></a></li>
</ul>
<div class="planes_item_bg"></div>
</li>
<li class="empty_legs_full_list_item">
<ul>
<li><a href="/planes/phenom-100/">Phenom 100</a></li>
<li>
<span>2 182</span>
<div class="scale_back_lit">
<div class="scale_blue_lit scale_tail_lit"></div>
<div class="scale_blue_lit scale_center_lit" style="width: 12.455106448626967%;"></div>
<div class="scale_blue_lit scale_head_lit"></div>
</div>
</li>
<li>722</li>
<li>6</li>
<li>3,35</li>
<li>1,55</li>
<li>1,50</li>
<li><a href="#" class="order_flight_lit"></a></li>
</ul>
<div class="planes_item_bg"></div>
</li>
<li class="empty_legs_full_list_item">
<ul>
<li><a href="/planes/phenom-300/">Phenom 300</a></li>
<li>
<span>3 650</span>
<div class="scale_back_lit">
<div class="scale_blue_lit scale_tail_lit"></div>
<div class="scale_blue_lit scale_center_lit" style="width: 20.834618944770135%;"></div>
<div class="scale_blue_lit scale_head_lit"></div>
</div>
</li>
<li>839</li>
<li>6</li>
<li>4,88</li>
<li>1,55</li>
<li>1,50</li>
<li><a href="#" class="order_flight_lit"></a></li>
</ul>
<div class="planes_item_bg"></div>
</li>
<li class="empty_legs_full_list_item">
<ul>
<li><a href="/planes/premier-ia/">Premier IA</a></li>
<li>
<span>2 704</span>
<div class="scale_back_lit">
<div class="scale_blue_lit scale_tail_lit"></div>
<div class="scale_blue_lit scale_center_lit" style="width: 15.434742363468064%;"></div>
<div class="scale_blue_lit scale_head_lit"></div>
</div>
</li>
<li>841</li>
<li>7</li>
<li>4,11</li>
<li>1,68</li>
<li>1,65</li>
<li><a href="#" class="order_flight_lit"></a></li>
</ul>
<div class="planes_item_bg"></div>
</li>
<li class="empty_legs_full_list_item">
<ul>
<li><a href="/planes/citation-cj2-plus/">Citation CJ2+</a></li>
<li>
<span>2 987</span>
<div class="scale_back_lit">
<div class="scale_blue_lit scale_tail_lit"></div>
<div class="scale_blue_lit scale_center_lit" style="width: 17.050138846035175%;"></div>
<div class="scale_blue_lit scale_head_lit"></div>
</div>
</li>
<li>774</li>
<li>8</li>
<li>4,14</li>
<li>1,47</li>
<li>1,45</li>
<li><a href="#" class="order_flight_lit"></a></li>
</ul>
<div class="planes_item_bg"></div>
</li>
<li class="empty_legs_full_list_item">
</ul>
|
Мои варианты кода jquery
Вариант 1:
$(function () {
if ($(/*"ul.empty_legs_full_list_head"*/ul:first).offset(top:val.top/*0*/))
{
$(".empty_legs_full_list_head")/*.append*//*.css*/.attr('position', 'fixed');,
}
if($("ul:last").offset({top:0}))
{
$(".empty_legs_full_list_head").remove("position", "fixed").append("position", "static");
}
Вариант 2:
function moveScroll() {
var scroll = $(window).scrollTop();
var table_top = $("#empty_legs_full_list_head").offset().top;
clone_table = $("#clone");
if (clone_table.length == 0) {
clone_table = $("#empty_legs_full_list_head").clone();
clone_table.attr('id', 'clone');
clone_table.css({
position: 'fixed',
'pointer-events': 'none',
top: 0
});
clone_table.width($("empty_legs_full_list_head").width() + vborder);
$("#empty_legs_full_list_head").append(clone_table);
$("#clone").css({
visibility: 'visible'
});
$("#clone empty_legs_full_list").css({
visibility: 'hidden'
});
}
} else {
$("#clone").remove();
}
}
$(window).scroll(moveScroll);
|
Обернуть всё в div class=fixed,
классу .fixed присвоить position:fixed; Если надо расфиксировать - убираем класс fixed
<style>
.fixed{
position:fixed;
}
</style>
<div id=Menu class=fixed>
<ul class="empty_legs_full_list_head stick">
<li><span>название</span></li>
<li>дальность полёта, <i>км</i></li>
<li><i>max</i> крейсерская<br>скорость, <i>км/ч</i></li>
<li><span><i>max</i> число<br>пассажиров</span></li>
<li><p>внутренние размеры (салон), <i>м</i></p><p><span class="l">длина</span> <span class="w">ширина</span><span class="h">высота</span></p></li>
<li>заказ</li>
</ul>
<ul class="empty_legs_full_list">
<li class="empty_legs_full_list_item">
<ul>
<li><a href="/planes/citation-mustang/">Citation Mustang</a></li>
<li>
<span>2 130</span>
<div class="scale_back_lit">
<div class="scale_blue_lit scale_tail_lit"></div>
<div class="scale_blue_lit scale_center_lit" style="width: 12.158284480098734%;"></div>
<div class="scale_blue_lit scale_head_lit"></div>
</div>
</li>
<li>630</li>
<li>5</li>
<li>2,97</li>
<li>1,40</li>
<li>1,37</li>
<li><a href="#" class="order_flight_lit"></a></li>
</ul>
<div class="planes_item_bg"></div>
</li>
<li class="empty_legs_full_list_item">
<ul>
<li><a href="/planes/citation-cj1-plus/">Citation CJ1+</a></li>
<li>
<span>2 408</span>
<div class="scale_back_lit">
<div class="scale_blue_lit scale_tail_lit"></div>
<div class="scale_blue_lit scale_center_lit" style="width: 13.745140388768899%;"></div>
<div class="scale_blue_lit scale_head_lit"></div>
</div>
</li>
<li>785</li>
<li>5</li>
<li>3,35</li>
<li>1,47</li>
<li>1,45</li>
<li><a href="#" class="order_flight_lit"></a></li>
</ul>
<div class="planes_item_bg"></div>
</li>
<li class="empty_legs_full_list_item">
<ul>
<li><a href="/planes/phenom-100/">Phenom 100</a></li>
<li>
<span>2 182</span>
<div class="scale_back_lit">
<div class="scale_blue_lit scale_tail_lit"></div>
<div class="scale_blue_lit scale_center_lit" style="width: 12.455106448626967%;"></div>
<div class="scale_blue_lit scale_head_lit"></div>
</div>
</li>
<li>722</li>
<li>6</li>
<li>3,35</li>
<li>1,55</li>
<li>1,50</li>
<li><a href="#" class="order_flight_lit"></a></li>
</ul>
<div class="planes_item_bg"></div>
</li>
<li class="empty_legs_full_list_item">
<ul>
<li><a href="/planes/phenom-300/">Phenom 300</a></li>
<li>
<span>3 650</span>
<div class="scale_back_lit">
<div class="scale_blue_lit scale_tail_lit"></div>
<div class="scale_blue_lit scale_center_lit" style="width: 20.834618944770135%;"></div>
<div class="scale_blue_lit scale_head_lit"></div>
</div>
</li>
<li>839</li>
<li>6</li>
<li>4,88</li>
<li>1,55</li>
<li>1,50</li>
<li><a href="#" class="order_flight_lit"></a></li>
</ul>
<div class="planes_item_bg"></div>
</li>
<li class="empty_legs_full_list_item">
<ul>
<li><a href="/planes/premier-ia/">Premier IA</a></li>
<li>
<span>2 704</span>
<div class="scale_back_lit">
<div class="scale_blue_lit scale_tail_lit"></div>
<div class="scale_blue_lit scale_center_lit" style="width: 15.434742363468064%;"></div>
<div class="scale_blue_lit scale_head_lit"></div>
</div>
</li>
<li>841</li>
<li>7</li>
<li>4,11</li>
<li>1,68</li>
<li>1,65</li>
<li><a href="#" class="order_flight_lit"></a></li>
</ul>
<div class="planes_item_bg"></div>
</li>
<li class="empty_legs_full_list_item">
<ul>
<li><a href="/planes/citation-cj2-plus/">Citation CJ2+</a></li>
<li>
<span>2 987</span>
<div class="scale_back_lit">
<div class="scale_blue_lit scale_tail_lit"></div>
<div class="scale_blue_lit scale_center_lit" style="width: 17.050138846035175%;"></div>
<div class="scale_blue_lit scale_head_lit"></div>
</div>
</li>
<li>774</li>
<li>8</li>
<li>4,14</li>
<li>1,47</li>
<li>1,45</li>
<li><a href="#" class="order_flight_lit"></a></li>
</ul>
<div class="planes_item_bg"></div>
</li>
<li class="empty_legs_full_list_item">
</ul>
</div>
|
| Часовой пояс GMT +3, время: 05:46. |