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!

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. — APAD1, Jul 15 '15 at 15:32

score 5 · Accepted Answer · answered Jul 15 '15 at 15:32

5

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

answered Jul 15 '15 at 15:32

Nanang Mahdaen El-Agung

1,404
10
14

Thank you, this solution worked great and was along the lines of what I was thinking. – user13286 Jul 15 '15 at 15:54

score 2 · Answer 2 · edited May 23 '17 at 10:30

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

edited May 23 '17 at 10:30

Community

1
1

answered Jul 15 '15 at 15:35

supercowz

102
8

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! – user13286 Jul 15 '15 at 15:54

score 2 · Answer 3 · answered Jul 15 '15 at 15:35

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/

score 1 · Answer 4 · answered Jul 15 '15 at 15:34

1

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

answered Jul 15 '15 at 15:34

tllewellyn

903
2
7
28

score 1 · Answer 5 · answered Mar 21 '20 at 21:13

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>

Bootstrap - maintaining column widths using position:fixed?

JSFiddle

5 Answers5