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找出滚动位置。从那里你将滚动事件上的绝对元素更新为从计数器顶部设置的px。容器需要设置为相对位置。有了这个，滚动条不是问题。

如果您不需要粘性标头，我发现最好的第一个解决方案，因为您不需要在每个滚动事件上运行代码。我会在resize事件上设置位置并从文档就绪事件中触发该事件。您也可以考虑使用智能调整大小功能，但这是另一个主题。

以下是使用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;
}

可滚动内容中的离子粘性元素

2 个答案: