4
위치 요소를 고정하고 상위 div의 전체 너비를 차지하려고합니다.부모 div의 위치 고정 된 요소 너비를 설정하지 않습니다
<div class="col-md-3">
<div class="player-avatar-card">
<div class="card-body">
<div class="avatar-image">
<img src="/imagecache/small/{{ $player->image_filename }}" alt="Profile Image" class="rounded-circle">
<img class="flag rounded-circle" src="/icons/flags-round/{{ $player->nationality }}.svg"></h3>
</div>
<h5>{{ $player->first_name }} {{ $player->last_name }}</h5>
<p>{{ $player->nationality }}, {{ $player->age }} years</p>
<div class="social-buttons">
<div class="col-12">
<a class="btn btn-info btn-lg" href="#" role="button">
<i class="ion-plus-round"></i> follow</a>
</div>
<div class="col-12">
<a class="btn btn-info btn-outline-info" href="#" role="button">
<i class="ion-android-share-alt"></i> share</a>
</div>
</div>
</div>
</div>
</div>
내가 요소에 스크롤에 player-avatar-card에 위치 픽스 클래스를 제공하고있다 : 이것은 내 HTML입니다
const avatarCard = document.querySelector('.player-avatar-card');
const fixClassAvatar = 'is-fixed-avatar';
function stickyScroll() {
if(window.pageYOffset > 56) {
avatarCard.classList.add(fixClassAvatar);
}
if(window.pageYOffset < 56) {
avatarCard.classList.remove(fixClassAvatar);
}
}
$(window).scroll(stickyScroll);
을 그리고 이것은 클래스 :
.is-fixed-avatar {
position: fixed;
max-width: inherit;
width: 100%;
}
단, 요소가 col-md-3 div에서 벗어나면 어떻게 해결할 수 있습니까?
Here은 바이올린입니다. 화면에 표시되도록 확장하여 제대로 작동하는지 확인하십시오.
요소를 절대, 정적 또는 고정으로 만들면 페이지 흐름에서 벗어나 더 이상 컨테이너 내부에있는 것으로 간주되지 않으므로 제한을받을 수 없습니다. – FluffyKitten
js를 사용하지 않고이 문제를 해결할 방법이 있습니까? – Leff
컨텍스트가 없거나이를 포함하는 코드를 보는 것이 어렵습니다. 예를 들어, 가장 왼쪽 열이 무엇입니까? 이 경우, 왼쪽에 영구적으로 고정되게하고 메인 컨텐츠에 패딩을 추가하여이를 방지 할 수 있습니다. 하지만 내가 말했듯이, 더 많은 정보 없이는 알기가 어렵습니다. – FluffyKitten