Trouble with setting the width of a fixed element within a parent div

Question

Trouble with setting the width of a fixed element within a parent div

My goal is to make an element's position fixed and have it take up the full width of its parent div. Below is the HTML I am working with:

     <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 applying a fix position class, is-fixed-avatar, when scrolling to the 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);

Here is the CSS class being applied:

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

However, the element extends outside of the col-md-3 div. How can I resolve this issue?

View the fiddle here. Be sure to expand it on the screen for better visibility.

jquery css twitter-bootstrap bootstrap-4 css-position

Answer 1

Answer №1

When you apply position: fixed, the div is removed from the flow and therefore detached from the col-md-3 container. My suggestion is to switch it to absolute:

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

You can now use jQuery to add some level of "stickiness" to the avatar - test this behavior by adjusting the window height. Refer to the simplified demo below (the last section-card is nested 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 // Adjusting for padding with 90px
    });
  }
  $(window).scroll(sticky);
});

// CSS Styles

/* Additional styles go here */
.is-fixed {
  /* fixed positioning styles */
}

.page-nav {
  /* Page navigation styles */
}

.lg-strong-font {
  /* Large font styles */
}

.profile-content {
  /* Profile content styles */
}

// More CSS styles...

<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">
      <!-- Content structure goes here -->
    </div>
  </div>
</div>

Answer 2

When you apply position: fixed, the div is removed from the flow and therefore detached from the col-md-3 container. My suggestion is to switch it to absolute:

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

You can now use jQuery to add some level of "stickiness" to the avatar - test this behavior by adjusting the window height. Refer to the simplified demo below (the last section-card is nested 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 // Adjusting for padding with 90px
    });
  }
  $(window).scroll(sticky);
});

// CSS Styles

/* Additional styles go here */
.is-fixed {
  /* fixed positioning styles */
}

.page-nav {
  /* Page navigation styles */
}

.lg-strong-font {
  /* Large font styles */
}

.profile-content {
  /* Profile content styles */
}

// More CSS styles...

<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">
      <!-- Content structure goes here -->
    </div>
  </div>
</div>

Answer 3

Answer №2

In order to accomplish your desired outcome, there are three different approaches you can take.

Method 1

To start, you can enclose the fixed element and the scrollable content within a parent element. Set both elements to have a position: absolute property and apply overflow: scroll specifically to the content element. When implemented correctly, the fixed element will not move as the parent element does not scroll.

CSS

.parent {
    position: relative;
    width: 800px;
    height: 400px;
    overflow: hidden; // To prevent unnecessary scroll bars
}
.fixed-menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    z-index: 2;
}
.content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
}

HTML

<div class="parent">
    <div class="fixed-menu"></div>
    <div class="content"></div>
</div>

Method 2

An alternative method is to create a child that is absolutely positioned, followed by a grandchild containing the fixed content. By omitting specific positioning attributes for the fixed grandchild, it will remain fixed relative to the child's position.

.parent {
    position: relative;
    width: 25%;
    height: 200px;
    overflow: scroll;
    background-color: #f0f0f0;
}

.child {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50px;
    right: 50px;
}

.grandchild {
    width: 50px;
    height: 50px;
    position: fixed;
    background-color: red;
}

HTML

<div class="parent">
    Content...          
    <div class="child"><div class="grandchild"></div></div>
</div>

Method 3... Kind of

The third approach involves establishing local coordinates for child elements by utilizing either will-change: transform or transform: translate*(0). This creates a separate rendering layer for the element with its own coordinate system.

CSS

.parent {
    position: relative;
    width: 30%;
    height: 200px;
    overflow: scroll;
    background-color: #f0f0f0;
    transform: translateX(0); // Choose any axis for transformation
}

.child {
    position: fixed;
    width: 50px;
    height: 50px;
    top: 25px;
    right: 25px;
    background-color: red;
}

HTML

<div class="parent">
    Content...      
    <div class="child"></div>
</div>

I'm currently exploring the third method further as it seems to behave differently than what I anticipated. The observed glitch in modern browsers where the fixed element acts similarly to an absolute element suggests there may be a potential workaround, but additional experimentation is required to validate this assumption.

Wrap Up

You now have multiple methods at your disposal, each offering a unique way to achieve your goal. My focus remains on refining the third method due to its intriguing behavior, opening up new possibilities for achieving the desired outcome through experimental adjustments.

Answer 4

In order to accomplish your desired outcome, there are three different approaches you can take.

Method 1

To start, you can enclose the fixed element and the scrollable content within a parent element. Set both elements to have a position: absolute property and apply overflow: scroll specifically to the content element. When implemented correctly, the fixed element will not move as the parent element does not scroll.

CSS

.parent {
    position: relative;
    width: 800px;
    height: 400px;
    overflow: hidden; // To prevent unnecessary scroll bars
}
.fixed-menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    z-index: 2;
}
.content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
}

HTML

<div class="parent">
    <div class="fixed-menu"></div>
    <div class="content"></div>
</div>

Method 2

An alternative method is to create a child that is absolutely positioned, followed by a grandchild containing the fixed content. By omitting specific positioning attributes for the fixed grandchild, it will remain fixed relative to the child's position.

.parent {
    position: relative;
    width: 25%;
    height: 200px;
    overflow: scroll;
    background-color: #f0f0f0;
}

.child {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50px;
    right: 50px;
}

.grandchild {
    width: 50px;
    height: 50px;
    position: fixed;
    background-color: red;
}

HTML

<div class="parent">
    Content...          
    <div class="child"><div class="grandchild"></div></div>
</div>

Method 3... Kind of

The third approach involves establishing local coordinates for child elements by utilizing either will-change: transform or transform: translate*(0). This creates a separate rendering layer for the element with its own coordinate system.

CSS

.parent {
    position: relative;
    width: 30%;
    height: 200px;
    overflow: scroll;
    background-color: #f0f0f0;
    transform: translateX(0); // Choose any axis for transformation
}

.child {
    position: fixed;
    width: 50px;
    height: 50px;
    top: 25px;
    right: 25px;
    background-color: red;
}

HTML

<div class="parent">
    Content...      
    <div class="child"></div>
</div>

I'm currently exploring the third method further as it seems to behave differently than what I anticipated. The observed glitch in modern browsers where the fixed element acts similarly to an absolute element suggests there may be a potential workaround, but additional experimentation is required to validate this assumption.

Wrap Up

You now have multiple methods at your disposal, each offering a unique way to achieve your goal. My focus remains on refining the third method due to its intriguing behavior, opening up new possibilities for achieving the desired outcome through experimental adjustments.

Trouble with setting the width of a fixed element within a parent div

Answer №1

Answer №2

Similar questions

Styles for reading on Safari using an iPhone's reader mode

The website on iPad automatically zooms in upon opening and then increases the zoom level even further when a specific button is tapped

JSON Compression/Decompression Utility

Modify the state of each individual button

PHP data grid selects a field and dynamically generates a dropdown menu from other tables

Filter input in jQuery for a textarea box

How to align text to the right in a Bootstrap 5 card header

Tips on choosing a button and applying custom styles with emotion styles in MUI

The javascript code appears to be functioning properly on desktop browsers but is not functioning as expected on Chrome's mobile browser

Using jQuery to automatically scroll to the bottom of a div when sliding down

Why does CodeIgniter consistently return true when using Jquery's .ajax() and form validation?

Beginner in CSS wanting to set background image for input field

What is the optimal order for arranging CSS properties?

JavaScript: Utilizing variable identifiers to invoke functions

Initiating an action the moment the element comes into view by scrolling

The functionality of Ajax calls is malfunctioning specifically in Internet Explorer

Various instances of the jQuery niceScroll plugin

Form popup that closes without refreshing the page upon submission

Show two <p>'s next to each other

Tips on aligning a v-btn alongside v-expansion-panels on the same row