Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting the positioned fixed element width of the parent div not working

I am trying to fix position element, and to take the full width of the parent div. This is my html:

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

I am giving the position fix class to player-avatar-card, on scrolling to element:

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

And this is the class:

.is-fixed-avatar {
  position: fixed;
  max-width: inherit;
  width: 100%;
}

But, the element goes out of the col-md-3 div, how can I fix that?

Here is the fiddle. Make sure to expand it on the screen, so that it is wide enough to see it working.

like image 504
Leff Avatar asked Oct 29 '22 01:10

Leff


1 Answers

If you use position: fixed, the div is taken out of the flow and consequently taken out of the col-md-3 div. I propose to make it absolute:

.profile-content .player-info .is-fixed-avatar {
  position: absolute;
  left: 0;
  right: 0;
}

Now you can use jQuery to place some stickiness to the avatar - check it by minimising the window height. See a simplified demo below (the last section-card is inside the col-md-9):

$(document).ready(function() {
  const avatar = $('.player-avatar-card');
  const avatarBox = avatar.parent();

  function sticky() {
    var offset = avatarBox.offset().top - $(window).scrollTop();
    if (offset >= 0) {
      avatar.css('top', '0');
      return;
    }
    avatar.offset({
      'left': avatar.offset().left,
      'top': -offset + 90 // 90px to adjust for padding
    });
  }
  $(window).scroll(sticky);
});
body {
  background: #fff;
  color: #484848 !important;
}

.is-fixed {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
  top: 0;
}

.page-nav {
  height: 56px;
  border-bottom: 1px solid #f1eeee;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.page-nav .section-links .active {
  border-bottom: 2px solid #008489;
  color: #008489;
  font-weight: 500;
}

.page-nav .nav {
  height: 56px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}

.page-nav .nav .nav-link {
  height: 56px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  min-width: 100px;
  -webkit-box-pack: center;
  justify-content: center;
  color: #484848;
}

.lg-strong-font {
  font-size: 34px;
  font-weight: 500;
  color: #e90052;
}

.lg-strong-font span {
  font-size: 1rem;
}

.profile-content {
  padding: 2rem 0;
  background: #f7f7f7;
}

.profile-content .info-content {
  padding-left: 3rem;
  padding-right: 3rem;
}

.profile-content .title-margin {
  margin-bottom: 1.5rem;
}

.profile-content .title-icon {
  color: #008489;
  margin-right: 1.7rem;
  margin-left: 2px;
}

.profile-content .info-title-hr {
  margin-left: 3rem;
  margin-right: 3rem;
}

.profile-content .section-card {
  margin-top: 1.5rem;
  background: #fff;
  padding: 1.5rem;
  border: 1px solid #f1eeee;
}

.profile-content .sub-section {
  margin-top: 2rem;
}

.profile-content .icon-wrapper {
  width: 30px;
  height: 30px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}

.profile-content .icon-wrapper i {
  color: #008489;
}

.profile-content .video-section {
  margin: 0;
  margin-left: -5px;
}

.profile-content .video-section .profile-video-box {
  padding: 0;
  padding-left: 5px;
  margin-bottom: 10px;
}

.profile-content .player-info .icon-box {
  padding-right: 0;
  padding-top: 8px;
}

.profile-content .player-info .player-info-card-content {
  margin-top: 0;
}

.profile-content .player-info .is-fixed-avatar {
  position: absolute;
  left: 0;
  right: 0;
}

.profile-content .player-info .player-avatar-card {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem 0;
  border: 1px solid #f1eeee;
  background: #fff;
}

.profile-content .player-info .player-avatar-card .card-body {
  width: 100%;
}

.profile-content .player-info .player-avatar-card p {
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  color: #7b7b7b;
}

.profile-content .player-info .player-avatar-card .avatar-image {
  position: relative;
  margin-bottom: 1.5rem;
  display: inline-block;
}

.profile-content .player-info .player-avatar-card .avatar-image img {
  width: 120px;
  height: 120px;
}

.profile-content .player-info .player-avatar-card .avatar-image .flag {
  position: absolute;
  bottom: 10px;
  right: -5px;
  width: 35px;
  height: 35px;
  border: 3px solid #fff;
}

.profile-content .player-info .player-avatar-card .icon {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}

.profile-content .player-info .player-avatar-card .card-title {
  margin: 0.5rem 0;
}

.profile-content .player-info .social-buttons {
  margin-top: 1rem;
}

.profile-content .player-info .social-buttons .btn {
  border-radius: 200px;
  font-weight: 500;
  margin: 0.5rem;
}

.profile-content .player-info .social-buttons .btn i {
  margin-right: 10px;
}

.profile-content .table>thead>tr>th,
.profile-content .table>tbody>tr>th,
.profile-content .table>tfoot>tr>th,
.profile-content .table>thead>tr>td,
.profile-content .table>tbody>tr>td,
.profile-content .table>tfoot>tr>td {
  line-height: 1.42857143;
  vertical-align: top;
  border: 0 !important;
}

.profile-content .table>thead>tr>th {
  text-align: center;
}

.profile-content .table>thead>tr>th .icon-wrapper {
  margin: auto;
}

.profile-content .table>thead>tr>th,
.profile-content .table>tbody>tr>td {
  max-width: 110px !important;
  vertical-align: middle;
}

.profile-content .table>thead {
  border-bottom: 1px solid #f1eeee;
  background: #fff;
}

.profile-content .table-responsive {
  margin-bottom: 0;
}

.profile-content .no-data-message {
  margin-top: 1.5rem;
}

.profile-content .years {
  font-size: 14px;
  font-weight: 500;
}

.profile-content .info-label {
  font-weight: 400;
  font-size: 0.8rem;
  color: #7b7b7b;
}

footer {
  height: 20rem;
  padding: 20px 0;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  background-color: #fff;
  color: #3c3e42;
  border-top: 1px solid rgba(204, 204, 204, 0.4);
}

footer h4 {
  font-weight: 700;
}

footer a {
  display: block;
  font-weight: 500;
  margin-bottom: 10px;
}

.search-result {
  margin-top: 2rem;
}

.search-result .search-list {
  margin-top: 1rem;
}

.search-result .query-card {
  color: #fff;
  background: #00bcd4;
}

.search-result .query-card .card-block {
  padding: 1rem;
}

.search-result .search-list-media .media img {
  width: 160px;
  height: auto;
}

.search-result .media {
  margin-top: 10px !important;
}

.search-result .media-body p {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.search-result .tab-content {
  padding: 1rem;
}

.search-result .pagination,
.search-result .tab-content {
  margin-top: 2rem;
}

.contact-form .card {
  padding: 1rem;
}

body {
  overflow-x: hidden;
  position: relative;
}

#wrapper {
  position: relative;
  z-index: 10;
  top: 0;
  left: 0;
  transition: all 0.4s;
}

.menu {
  position: fixed;
  z-index: 20;
  overflow: hidden;
  transition: all 0.4s;
  color: #008489;
  padding: 45px;
  padding-top: 3rem;
  background: #333;
}

.menu a {
  color: #e4e4e4;
}

.menu h4 {
  margin-top: 10px;
}

.menu .btn {
  margin-top: 1rem;
}

.push-menu-left {
  top: 50px;
  width: 280px;
  height: 100%;
  box-shadow: -4px 1px 5px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: -4px 1px 5px 0px rgba(0, 0, 0, 0.2);
}

.push-menu-left {
  right: -285px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container-fluid page-nav">
  <div class="container">
    <div class="row">
      <div class="col-md-9 offset-md-3">
        <nav id="page-nav" class="nav section-links">
          <a class="nav-link active" href="#info">Info</a>
          <a class="nav-link" href="#videos">Videos</a>
          <a class="nav-link" href="#stats">Statistics</a>
        </nav>
      </div>
    </div>
  </div>
</div>
<div class="profile-content">
  <div class="row player-info">
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <div class="player-avatar-card is-fixed-avatar">
            <div class="card-body">
              <div class="avatar-image">
                <img src="http://via.placeholder.com/350x150" alt="Profile Image" class="rounded-circle">
                <img class="flag rounded-circle" src="http://via.placeholder.com/32x32">
              </div>
              <h5>Name</h5>

              <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>
        <div class="col-md-9">
          <div id="info" class="player-info-card-content section-card">
            <div class="row">
              <div class="col-12">
                <h5><i class="ion-ios-list-outline title-icon"></i> Overview</h5>
                <hr class="info-title-hr">
              </div>
            </div>
            <div class="row info-content">
              <div class="col-12">
                <div class="row">
                  <div class="col-6 col-md-3 player-info-data">
                    <div class="row">
                      <div class="col-12 info-box">
                        <span class="info-label">Born</span>
                        <p>Born</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-6 col-md-3 player-info-data">
                    <div class="row">
                      <div class="col-12 info-box">
                        <span class="info-label">Club</span>
                        <p>Club</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-6 col-md-3 player-info-data">
                    <div class="row">
                      <div class="col-12 info-box">
                        <span class="info-label">Position</span>
                        <p>Position</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-6 col-md-3 player-info-data">
                    <div class="row">
                      <div class="col-12 info-box">
                        <span class="info-label">Height</span>
                        <p>180 cm</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-6 col-md-3 player-info-data">
                    <div class="row">
                      <div class="col-12 info-box">
                        <span class="info-label">Weight</span>
                        <p>75 kg</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-6 col-md-3 player-info-data">
                    <div class="row">
                      <div class="col-12 info-box">
                        <span class="info-label">Foot</span>
                        <p>Both</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-6 col-md-3 player-info-data">
                    <div class="row">
                      <div class="col-12 info-box">
                        <span class="info-label">Agent</span>
                        <p>Pro sports agency</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="section-card">
            <div id="videos" class="row">
              <div class="col-md-12">
                <h5 class="title-margin">
                  <i class="ion-ios-videocam-outline title-icon"></i> Videos
                </h5>
              </div>
            </div>
            <div class="row video-section">
              <div class="col-12">
                <div class="info-content">
                  <p></p>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-lg-4 profile-video-box">
              <a href="">
                <div class="card bg-dark text-white">
                  <img src="http://via.placeholder.com/350x150" class="card-img" />
                  <div class="card-img-overlay">
                    <div class="play-icon-wrapper">
                      <i class="ion-ios-play"></i>
                    </div>
                    <div class="card-content">
                      <h5 class="card-title">title
                      </h5>
                      <p class="card-text">date
                      </p>
                    </div>
                  </div>
                </div>
              </a>
            </div>
          </div>

          <div class="section-card">
            <div id="stats" class="row">
              <div class="col-md-12">
                <h5 class="title-margin">
                  <i class="ion-ios-pulse-strong title-icon"></i> Performance data
                </h5>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="table-responsive">
                  <table class="table">
                    <thead>
                      <tr>
                        <th>
                          <div class="icon-wrapper">
                            <i class="ion-android-calendar"></i>
                          </div>
                          <span class="info-label">Season</span>
                        </th>
                        <th>
                          <div class="icon-wrapper">
                            <i class="flaticon-football-trophy-cup"></i>
                          </div>
                          <span class="info-label">Competition</span>
                        </th>
                        <th>
                          <div class="icon-wrapper">
                            <i class="flaticon-soccer-t-shirt"></i>
                          </div>
                          <span class="info-label">Club</span>
                        </th>
                        <th>
                          <div class="icon-wrapper">
                            <i class="ion-ios-football-outline"></i>
                          </div>
                          <span class="info-label">Goals</span>
                        </th>
                        <th>
                          <div class="icon-wrapper">
                            <i class="flaticon-football-strategic-sketch"></i>
                          </div>
                          <span class="info-label">Assists</span>
                        </th>
                        <th>
                          <div class="icon-wrapper yellow">
                            <i class="flaticon-football-yellow-warning-card"></i>
                          </div>
                          <span class="info-label">Yellow cards</span>
                        </th>
                        <th>
                          <div class="icon-wrapper red">
                            <i class="flaticon-football-card-with-cross-mark"></i>
                          </div>
                          <span class="info-label">Red cards</span>
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="text-center">17/18</td>
                        <td class="text-center">NO</td>
                        <td class="text-center">Odd</td>
                        <td class="text-center">5</td>
                        <td class="text-center">3</td>
                        <td class="text-center">0</td>
                        <td class="text-center">0</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
like image 51
kukkuz Avatar answered Nov 09 '22 17:11

kukkuz