可滾動內容中的離子粘性元素

Question

我正在嘗試制作離子性的粘性元件，但不確定如何實現此目的。 我有一個固定位置的后退箭頭。 這是我的html：

<ion-content>
    <div class="back-arrow">
      <a class="button button-icon icon ion-chevron-left" ui-sref="main.front">
      </a>
    </div>

...rest of the code...

</ion-content>

這是我的CSS：

.back-arrow {
  width: 100%;
  height: 48px;
  position: absolute;
  top:0;
  z-index: 1;
}

使其更清楚。 當我有：

<div class="back-arrow">
          <a class="button button-icon icon ion-chevron-left" ui-sref="main.front">
          </a>
        </div>
<ion-content>
  ...rest of the code...   
</ion-content>

然后它起作用了，但是當它在離子含量內部時，它不是粘性的，我需要在含量內部。

Answer 1

我只是知道，您不能相對於其父項設置固定元素，除非其為主體。 但是，您可以通過兩種方式使用javascript解決此問題。 一種方法是獲取容器的偏移量，然后計算必須在文檔中設置固定元素的位置以顯示在櫃台上。 但是，對於不確定所有瀏覽器的寬度是否相同的滾動，這可能會有些棘手。

另一種解決方案是讓您的固定元素絕對定位在您的計數器中，然后通過javascript查找滾動位置。 從此，您將滾動事件上的絕對元素更新為從計數師頂部開始的已設置像素。 容器需要設置為相對位置。 這樣，滾動條就沒有問題了。

如果您不需要粘性標頭，因為不需要在每個滾動事件上運行代碼，則我找到的第一個解決方案是最好的。 我將在調整大小事件上設置位置，並從文檔就緒事件觸發該事件。 另外，您可能想考慮使用智能調整大小功能，但這是另一個主題。

這是使用jquery的第一個解決方案： https : //jsfiddle.net/y842v5j8/3/

html

<div data-container>
  <span data-sticky>sticky</span>
  <p>
    Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>
  </p>
</div>

的CSS

html,body{
  margin:0;
}

div{
  position:relative;
  width:200px;
  height:200px;
  display:block;
  padding:40px 5px;
  margin:50px auto;
  overflow-y:scroll;
  background:#ddd;
  border:1px solid #000;
}
div span{
  position:fixed;
  top:-100px;
  left:-100px;
  background:#fff;
  background:#ccc;
  padding:5px;
  border:1px solid #000;
  margin:20px 0 0 -20px; /* set this to get it from top right */
}

jQuery的

$(document).ready(function(){
    $(window).resize(function(){
    $('[data-sticky]').css({
        left: ($('[data-container]').offset().left + $('[data-container]').outerWidth()) - $('[data-sticky]').outerWidth()+'px',
      top: $('[data-container]').offset().top+'px'
    });
  });
  $(window).resize();
});

---

這是使用jquery的第二種解決方案： https : //jsfiddle.net/y842v5j8/5/

html

 <div data-container> <span data-sticky>sticky</span> <p> Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br> </p> </div> 

的CSS

 html,body{ margin:0; } div{ position:relative; width:200px; height:200px; display:block; padding:40px 5px; margin:50px auto; overflow-y:scroll; background:#ddd; border:1px solid #000; } div span{ position:absolute; top:0; right:0; background:#fff; background:#ccc; padding:5px; border:1px solid #000; margin:20px 20px 0 0; /* set this to get it from top right */ } 

jQuery的

 $(document).ready(function(){ $('[data-container]').scroll(function(){ $('[data-sticky]').css( 'top', $(this).scrollTop()+'px' ); }); $('[data-container]').scroll(); }); 

Answer 2

覆蓋display: block ion-item-sliding

ion-item-sliding {
    display: initial;
}