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)
});

twitter bootstrap 2.3.2'affix'无法在移动设备上运行

1 个答案: