Bootstrap - maintaining column widths using position:fixed?

Question

I am trying to create a "sticky" navigation on my page where a div gets position:fixed; once the user has scrolled to the element. The functionality is working as expected, but the widths of the two columns that are supposed to stick to the top change once the sticky class is added. I tried adding width:100%; to the CSS of the sticky element, but then the element expands beyond the container.

How can I make sure the column widths stay where they should be when position:fixed; is added?

HMTL:

<div class="container">
    <div class="padding"></div>
    <div class="anchor"></div>
    <div class="row sticky">
        <div class="col-sm-6">
            Testing
        </div>
        <div class="col-sm-6">
            Testing
        </div>
    </div>
    <div class="padding2"></div>
</div>

CSS:

.padding {
    height:250px;
}
.padding2 {
    height:1000px;
}
.sticky {
    background:#000;
    height:50px;
    line-height:50px;
    color:#fff;
    font-weight:bold;
}
    .sticky.stick {
        position:fixed;
        top:0;
        z-index:10000;
    }

JS:

function stickyDiv() {
    var top = $(window).scrollTop();
    var divTop = $('.anchor').offset().top;
    if (top > divTop) {
        $('.sticky').addClass('stick');
    } else {
        $('.sticky').removeClass('stick');
    }
}

$(window).scroll(function(){ 
    stickyDiv();
});
stickyDiv();

JSFiddle

Thanks!

Comprehensible

You could do it by getting the width of the sticky element with Javascript on page load and then set the width of the element with JS once the fixed positioning is added. Not sure if it can be done with straight HTML/CSS. – Fitzger

Answer 1

Fixed position is relative to body, so it will count the 100% width from body width. If using javascript is ok, you can set the sticky width by getting the container width. Check the Updated Fiddle

Hardtop

Thank you, this solution worked great and was along the lines of what I was thinking. – Comprehensible

Answer 2

add:

width:inherit;

to your .sticky.stick

JSFiddle

like Nanang Mahdaen El-Agun said, a fixed position relates the width to the body. With width:inherit; it will use the width of the .container class

reference: Set width of a "Position: fixed" div relative to parent div

Yaya

Very nice solution, unfortunately won't work in this case because of browser compatibility with width:inherit; but will keep in mind for the future! – Comprehensible

Answer 3

You can add a 100% width wrapper around the container and have that stick instead.

<div class="wrap">
    <div class="container sticky">
        <div class="row">
        ...
        </div>
    </div>
</div>

updated fiddle: https://jsfiddle.net/mileandra/omeegfc7/

Jesus

Answer 4

I was able to get it to work by setting your container to "container-fluid" then adding the width: 100%; to your .stick class.

Celanese

Answer 5

In Bootstrap 4 it's sufficient to add a <div class="sticky-top">...</div> around your row div: https://getbootstrap.com/docs/4.4/utilities/position/

<div class="sticky-top">
  <div class="row">
    <div class="col-sm-6">
      Testing
    </div>
    <div class="col-sm-6">
      Testing
    </div>
  </div>
</div>

Dihydrostreptomycin