粘性左列在jQuery的移動

是否有可能在jQuery移動中完成以下內容？粘性左列在jQuery的移動

我有一個網格

<div class="ui-grid-a" > 
      <div class="ui-block-a" > 
       navigationtree 
      </div> 

      <div class="ui-block-b"> 
       datatable with 50+ rows 
      </div> 
</div>

當表中有太多數據滾動條就會出現，且嵌段b應該是滾動的，其中塊的一個應該是在任何時候都粘，以便導航保持原位。

是否有可能在jquery mobile中完成這樣的行爲？

來源

2014-11-14 Andreas Zeiner

由於2個網格塊共享50％的寬度，通過將塊a設置爲固定位置並使塊b右移，可以很容易地實現它。

演示

http://jsfiddle.net/59v0gy6w/

<div class="ui-block-a" style="position:fixed"> 

<div class="ui-block-b" style="float:right">

來源

2014-11-14 14:54:48 Tasos

哇，謝謝sooo多!!!這正是我需要的！ – 2014-11-14 14:59:58

cytasos給了一個很好的答案！如果你真的想只是UI塊-B是滾動的，你可以這樣來做：

第一比例尺的UI內容div來填充設備/屏幕高度：

function ScaleContentToDevice() { 
    scroll(0, 0); 
    var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height(); 
    $(".ui-content").height(content); 
} 

$(document).on("pagecontainershow", function() { 
    ScaleContentToDevice(); 
}); 

$(window).on("resize orientationchange", function() { 
    ScaleContentToDevice(); 
});

下一組網格高度爲100％和嵌段b的div至100％的高度和溢流在CSS：

.ui-grid-a { 
    height: 100%; 
} 
.ui-block-b { 
    height: 100%; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
}

DEMO

來源

2014-11-14 15:08:28 ezanker

哇，這很聰明。 – Tasos 2014-11-14 16:04:27

@cytasos，謝謝，我喜歡你的解決方案，因爲它更簡單，我永遠不會想到它:) – ezanker 2014-11-14 16:10:25

thx很多這是真的另一個很酷的方式！問題是導航是一個可能比屏幕更大的樹，意味着它應該可以滾動！ – 2014-11-14 16:31:31

粘性左列在jQuery的移動

回答

相關問題