Width changing when switching from static positioning, to fixed positioning

Question

When scrolling, I change my card from position:static;, to position:fixed;. When it changes to position:fixed;, the width gets insanely large rather than staying the same.

I've tried a variety of solutions, including all listed on a near duplicate post here: Is it possible to keep the width of the parent element when position: fixed is applied?

Just wondering if I'm being silly here. Any help would be greatly appreciated.

var elementPosition = $('#navigation').offset();

$(window).scroll(function() {
  if ($(window).scrollTop() > elementPosition.top) {
    $('#navigation').css('position', 'fixed').css('top', '0');
  } else {
    $('#navigation').css('position', 'static');
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<div class="container-fluid mt-4">
  <div class="row">
    <div class="col-3">
      <div class="card" id="navigation">
        <div class="card-body">
          <h3>txgrgrgr</h3>
          <p>Hello and welcome to the online booking page forthghfg.</p>
          <hr>
          <h4 class="mt-4">Contact</h4>
          <p><a href="">thghshg.co.uk</a></p>
          <p><a href="">0123464</a></p>
          <hr>
          <h4 class="mt-4">Address</h4>
          <p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
          <hr>
          <h4 class="mt-4">Opening Times</h4>
          <p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
        </div>
      </div>
    </div>

    <div class="col-9" style="margin-bottom:1000px;">
      <div class="card">
        <div class="card-body text-center">
          <h2 class="mb-4 pb-4 pt-4">Schedule with a team member</h2>
          <div class="row">
            <div class="col-3 mb-3">
              <div class="card h-100">
                <img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
                  <a class="btn btn-success btn-block">Schedule Appointment</a>
                </div>
              </div>
            </div>
            <div class="col-3 mb-3">
              <div class="card h-100">
                <img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
                  <a class="btn btn-success btn-block">Schedule Appointment</a>
                </div>
              </div>
            </div>

Use `position: sticky`. https://developer.mozilla.org/en-US/docs/Web/CSS/position — SLaks, Dec 11 '18 at 03:02
Already tried that. If you add sticky to the code above it doesn't seem to stick. :/ — Duke Dodson, Dec 11 '18 at 03:07
`$('#navigation').css('position','-webkit-sticky').css('position','sticky').css('top','0');`, this is the code I had. Also tried playing around with the overflow of the parent element, still nope. — Duke Dodson, Dec 11 '18 at 03:12
Bootstrap has the `postion:sticky` functionality built in you can just add the class of `sticky-top` to your card like so: `
` — Steve K, Dec 11 '18 at 03:43

score 0 · Accepted Answer · answered Dec 11 '18 at 04:56

I have added position:sticky in both case. when its scroll or not. Pleas check below snippet its working fine.

var elementPosition = $('#navigation').offset();

$(window).scroll(function() {
  if ($(window).scrollTop() > elementPosition.top) {
    $('#navigation').css('position', 'sticky').css('top', '0');
  } else {
    $('#navigation').css('position', 'sticky');
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<div class="container-fluid mt-4">
  <div class="row">
    <div class="col-3">
      <div class="card" id="navigation">
        <div class="card-body">
          <h3>txgrgrgr</h3>
          <p>Hello and welcome to the online booking page forthghfg.</p>
          <hr>
          <h4 class="mt-4">Contact</h4>
          <p><a href="">thghshg.co.uk</a></p>
          <p><a href="">0123464</a></p>
          <hr>
          <h4 class="mt-4">Address</h4>
          <p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
          <hr>
          <h4 class="mt-4">Opening Times</h4>
          <p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
        </div>
      </div>
    </div>

    <div class="col-9" style="margin-bottom:1000px;">
      <div class="card">
        <div class="card-body text-center">
          <h2 class="mb-4 pb-4 pt-4">Schedule with a team member</h2>
          <div class="row">
            <div class="col-3 mb-3">
              <div class="card h-100">
                <img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
                  <a class="btn btn-success btn-block">Schedule Appointment</a>
                </div>
              </div>
            </div>
            <div class="col-3 mb-3">
              <div class="card h-100">
                <img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
                <div class="card-body">
                  <p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
                  <a class="btn btn-success btn-block">Schedule Appointment</a>
                </div>
              </div>
            </div>

You actually don't need any Javascript at all. – SLaks Dec 13 '18 at 16:13 — SLaks, Dec 13 '18 at 16:13

Width changing when switching from static positioning, to fixed positioning

1 Answers1