twitter bootstrap 2.3.2 'affix' не работает на мобильном телефоне

Question

Я работаю над большим проектом, который использует jQueryUI 1.10.3, bootstrap 2.3.2 и jQuery 2.0.3. обратите внимание на http://devel.gdfiles.net/test/welcome2 - когда пользователь прокручивает вниз, заголовок должен придерживаться вершины под панелью меню.

Как так:

<div data-spy="affix" data-offset-top="48" class="ui-widget-header"> 
    <button id="cancel" class="ui-corner-left icon icon-arrow-left white" onClick="pLoad('_LAST|/')"></button> 
    <h1>What do you like?</h1> 
    <button id="next" class="ui-corner-right icon icon-arrow-right white" style="float:right;" onClick="pLoad('/test/welcome3')"></button> 
</div> 

Как я уже сказал, это работает на настольном компьютере, так и на хромированной мобильном телефоне. Кажется, не работает на мобильном устройстве iOS или webkit mobile. Поэтому я просто пытаюсь понять, что я делаю неправильно, или если есть что-то, что мне нужно искать?

CSS:

.affix { 
    position: fixed; 
    width: 100%; 
    top: 48px; 
    margin: 0; 
    padding: 0; 
    left: 0; 
} 

.bx { 
    display:inline-block; 
    *display:inline; 
    border: solid 1em white; 
    font-size: 2.1vw; 
    text-align: center; 
    box-shadow: 2pt 2pt 12pt #333; 
    background: #ddd; 
    width:90%; 
    margin:5%; 
    padding: 29% 0; 
    color: rgb(49, 49, 49); 
} 
.hbx { 
    display:inline-block; 
    *display:inline; 
    border: solid 1em white; 
    font-size: 2.1vw; 
    text-align: center; 
    box-shadow: 2pt 2pt 12pt #BE2424; 
    background: #FFFFB8; 
    width:90%; 
    margin:5%; 
    padding: 29% 0; 
    color: rgb(49, 49, 49); 
} 
.hbx:hover { 
    box-shadow: 2pt 2pt 8pt #ac2424; 
    background: #FFFFc8; 
    cursor:pointer; 
} 
.bx:hover { 
    cursor:pointer; 
    box-shadow : 2pt 2pt 8pt #9DB8FF; 
    background-color :#ccc; 
} 

h1 { 
    font-size:1.1em; 
    padding-top:.2em; 
    display:inline-block; 
    text-align:center; 
    width:54%; 
    } 
@media (min-width:340px) 
{ 

    h1 { 
      font-size:1.1em;  
      width:58%; 
     } 
} 
@media (min-width:400px) 
{ 
    box { font-size:2.0vw } 
    h1 { 
      font-size:1.5em; 
      padding-top:.2em; 
      display:inline-block; 
      text-align:center; 
      width:64%; 
     } 
} 
@media (min-width:460px) 
{ 
    h1 { 
      font-size:2.5em; 
      padding-top:.2em; 
      display:inline-block; 
      text-align:center; 
      width:69%; 
     } 
    box { font-size:1.9vw } 
} 
@media (min-width:650px) 
{ 
    h1 { 
      font-size:2.5em; 
      padding-top:.2em; 
      display:inline-block; 
      text-align:center; 
      width:75%; 
     } 
    box { font-size:1.8vw } 
} 

@media (min-width:840px) 
{ 
h1 { 
    font-size:2.5em; 
    padding-top:.2em; 
    display:inline-block; 
    text-align:center; 
    width:84%; 
    } 

} 

JS

$(document).ready(function(){ 
    $('.bx').click(function(){ 
     //not selected 
     var $box = ($(this)); 
     console.log("clicked: " + $box); 

     if ($box.attr('class')=="bx") 
     { 
      $box.attr('class','hbx'); 
      return; 
     } 
     if ($box.attr('class')=="hbx") 
     { 
      $box.attr('class','bx'); 
      return; 
     } 


    }); 
}); 

HTML

<div data-spy="affix" data-offset-top="48" class="ui-widget-header"> 
      <button id="cancel" class="ui-corner-left icon icon-arrow-left white" onClick="pLoad('_LAST|/')"></button> 
      <h1>What do you like?</h1> 
      <button id="next" class="ui-corner-right icon icon-arrow-right white" style="float:right;" onClick="pLoad('/test/welcome3')"></button> 
</div> 


<row> 
    <div class="col-third"> 
    <div id="unselected" class="bx">FASHION</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">SPORTS</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">MUSIC</div> 
    </div> 
</row> 

<row> 
    <div class="col-third"> 
    <div id="unselected" class="bx">ENTERTAINMENT</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">FUNNY</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">NEWS</div> 
    </div> 
</row> 
<row> 
    <div class="col-third"> 
    <div id="unselected" class="bx">BUSINESS</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">HEALTH</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">DANCE</div> 
    </div> 
</row> 
<row> 
    <div class="col-third"> 
    <div id="unselected" class="bx">GOVERNMENT</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">ART</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">DESIGN</div> 
    </div> 
</row> 
<row> 
    <div class="col-third"> 
    <div id="unselected" class="bx">HEALTH</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">SCIENCE</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">FOOD</div> 
    </div> 
</row> 
<row> 
    <div class="col-third"> 
    <div id="unselected" class="bx">DRINK</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">TECH</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">FAMILY</div> 
    </div> 
</row> 
<row> 
    <div class="col-third"> 
    <div id="unselected" class="bx">FAITH</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">RELIGION</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">CAT</div> 
    </div> 
</row> 
<row> 
    <div class="col-third"> 
    <div id="unselected" class="bx">CAT</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">CAT</div> 
    </div> 
    <div class="col-third"> 
    <div id="unselected" class="bx">CAT</div> 
    </div> 
</row> 

Answer 1

Видимо проблема не данных шпион, то й когда я pjax загружаю страницу, она не работает. Я пытаюсь понять, почему. Первая мысль была bootstrap js wasnt loading, но она фактически загружена.

, необходимые для объявления этого к событию pjax успеха:

$('[data-spy="affix"]').each(function() { 
    var $spy = $(this) 
    , data = $spy.data() 
    console.dir($spy); 
    console.log(data); 
    data.offset = data.offset || {} 

    data.offsetBottom && (data.offset.bottom = data.offsetBottom) 
    data.offsetTop && (data.offset.top = data.offsetTop) 

    $spy.affix(data) 
});