Иконный липкий элемент внутри прокручиваемого содержимого

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 сверху счета. Контейнер необходимо установить как относительное положение. При этом полоса прокрутки не является проблемой.

Первое решение, которое я нахожу лучшим, если вам не нужен липкий заголовок, поскольку вам не нужно запускать код в каждом событии прокрутки. Я бы установил положение события изменения размера и инициировал это событие из события готовности документа. Также вы можете захотеть использовать функцию интеллектуального изменения размера, но это еще одна тема.

Вот первое решение с использованием 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(); 
});