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>

就像我說的，這適用於台式機和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)
});