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

I am trying to make a sticky element in ionic but not sure how to achieve this. I have a back arrow that I would like to have in a fixed position. This is my html:

我试图在离子中制作一个粘性元素,但不知道如何实现这一点。我有一个后箭头,我希望在一个固定的位置。这是我的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>

And this is my css:

这是我的css:

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

To make it clearer. When I have:

使它更清楚。当我有:

<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>

Then it is working, but when it is inside ion-content it is not sticky, and I need it inside of content.

然后它正在工作,但当它在离子内容时它不粘,我需要它在内容中。

1 个解决方案

#1

I just learn that you can not set a fixed element relative to it's parent, unless its the body. You can however solve this with javascript in two ways. One way is to get your offset of the container and then calculate where your fixed element has to be set in your document to show up over your countainer. This can however be a little bit tricky with the scroll that I'm not sure is same width in all browsers.

我只是了解到你不能设置相对于它的父元素的固定元素,除非它是正文。但是,您可以通过两种方式使用javascript解决此问题。一种方法是获取容器的偏移量,然后计算必须在文档中设置固定元素的位置,以显示在您的计数器上。然而,对于我不确定在所有浏览器中宽度相同的滚动,这可能有点棘手。

The other solution is to have your fixed element to be positioned absolute in your countainer and then via javascript find out the scroll position. From that you update your absolute element on scroll event to be your set px from top of the countainer. The container needs to be set as position relative. With this the scrollbar is not a problem.

另一个解决方案是让你的固定元素在你的计数器中绝对定位,然后通过javascript找出滚动位置。从那里你将滚动事件的绝对元素更新为从计数器顶部设置的px。容器需要设置为相对位置。有了这个,滚动条不是问题。

The first solution I find best if you dont need a sticky header as you dont need to run code on every scroll event. I would set the position on resize event and trigger that event from document ready event. Also you might wanna consider using a smart resize function, but that is another topic.

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

Here is the first solution using jquery: https://jsfiddle.net/y842v5j8/3/

这是使用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();
});

---

Here is the second solution using 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();
});