थैड पर स्थिति चिपचिपा

Question

जैसा कि आप जानते हैं, position: sticky; वेबकिट (demo) में उतरा है। अब तक मैं देख सकता हूं कि यह केवल मूल तत्व के भीतर ही काम करता है। लेकिन मैं जानना चाहता हूं कि क्या मैं इसे एक टेबल के साथ स्क्रॉलिंग div में उपयोग कर सकता हूं।

इसलिए div की स्क्रॉलिंग घटना पर इसे 'सुनें' की आवश्यकता है, table नहीं।

मुझे पता है कि मैं इसे जावास्क्रिप्ट और पूर्ण स्थिति के साथ कर सकता हूं, लेकिन मैं सोच रहा था कि sticky-positioning इसका समर्थन करेगा या नहीं।

Answer 1

जैसा कि यह पता चला है कि यह position: sticky केवल विंडो में काम करता है, न कि स्क्रॉलिंग div में।

<h1>Position sticky</h1> 
<div class="testTable"> 
<table class="stickyHead"> 
    <thead> 
     <tr> 
      <th>column 1</th> 
      <th>column 2</th> 
      <th>column 3</th> 
      <th>column 4</th>    
     </tr>  
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
    </tbody> 
</table> 
</div>​ 

सीएसएस मैं प्रयोग किया है::

मैं एक मेज हेडर के साथ एक बहुत ही लंबी मेज के साथ एक test-case बनाया

h1 { 
    font-size: 18px; 
    font-weight: bold; 
    margin: 10px 0; 
} 
div.testTable { 
    height: 200px; 
    overflow: auto; 
} 

table.stickyHead thead { 
    position: -webkit-sticky; 
    top: 0px; 
    background: grey; 
} 
table.stickyHead td, 
table.stickyHead th { 
    padding: 2px 3px; 
}​ 

आप, यदि आप आवरण से अतिप्रवाह निकाल सकते हैं के रूप में और अपनी खिड़की को इतना लंबा नहीं बनाते हैं, टेबल-हेड खिड़की के शीर्ष पर चिपक रहा है। मैं भले ही आप दे divposition: relative

Answer 2

position: stickyतालिका तत्वों के साथ काम नहीं करता है (जब तक कि उनके display विशेषता table- साथ शुरू होता है) के बाद से टेबल specification का हिस्सा नहीं हैं बनाने लपेटकर div पर लागू नहीं होता: जैसे तालिकाओं से लेआउट की

अन्य प्रकार के, बक्से, गहरे लाल रंग का एनोटेशन, ग्रिड लेआउट, कॉलम और सामान्य "प्रवाह" सामग्री के बुनियादी हैंडलिंग "चल", अन्य मॉड्यूल में वर्णित हैं।

Answer 3

आप क्रोम के लिए चिपचिपा हेडर की जरूरत है तो ही आप एक thead तत्व में position: sticky; top: some_value (top संपत्ति अनिवार्य है) td तत्व के लिए सेट कर सकते हैं।

देखें:

<table border=1> 
    <thead> 
    <tr> 
     <td style='position: sticky; top: -1px;background: red'>Sticky Column</td> 
     <td>Simple column</td> 
    </tr> 
    </thead> 

table with a stiky header