twitter bootstrap 2.3.2'词缀'不能在移动设备上工作

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> 

就像我说的，这适用于台式机，并在移动版Chrome。似乎不适用于iOS移动版或webkit移动版。所以我只是想弄清楚我做错了什么，或者是否有我需要寻找的东西？

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未加载，但实际上它已加载。

需与广告这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) 
});