Форум

ken_ukeng · #1 (**permalink**) 11.02.2013, 12:39

Как зафиксировать шапку вот такой таблицы на 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>

ken_ukeng · #2 (**permalink**) 11.02.2013, 12:42

Вариант 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);

Deff · #3 (**permalink**) 11.02.2013, 16:00

Обернуть всё в 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>

Форум

Справочник

Discord чат

Курсы javascript