CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mdd
Mdd

Reputation: 4410

Position Fixed - Set width to be equal to container

I have been trying to set a div's position to fixed when a user has scrolled far enough. I noticed that when the div's position is set to fixed the width is not the same as the parent elemnt. How can I keep the width of the div with position: fixed the same as the parent element?

In this example I want the bottom div to be the same width as the yellow box once position:fixed is set.

http://jsfiddle.net/BYJPB/

Here's my HTML:

<header>
  <div class="filler-space">
    Filler Space
  </div>
  <div class="toolbar">
    <div class="current-article">
        <div class="progress-bar"></div>
        My article
    </div>
  </div>
</header>

Here's my CSS:

body {
  padding:0 10px;
  height: 1000px;
}

.filler-space {
  background-color: yellow;
  border:1px solid #000000;
  height: 140px;
}

.toolbar {
  border: 1px solid black;
}

.current-article {
  font-weight: 600;
  height: 100%;
  line-height: 40px;
  overflow: hidden;
  width: 100%;
  z-index: -1;
}

.progress-bar {
  position: absolute;
}

.prog .progress-bar {
  background: none repeat scroll 0 0 #F2F4F7;
  bottom: 0;
  height: 100%;
  left: 0;
  margin: 0 -10px 0 -10px;
  overflow: hidden;
  right: 0;
  top: 0;
  transition: width 0.1s ease 0s;
  z-index: -1;
  width: 100%;
}

Here is my JavaScript:

var $toolbar = $('.toolbar');
var $window = $(window);
var $header = $('header');

$(document).scroll(function() {
  var scrollTop = $window.scrollTop();
  if ( scrollTop > 150) {
    $toolbar.css({
        'position' : 'fixed',
        'top' : 0
    });
    $header.addClass('prog');
  }
  else {
    $toolbar.css({
        'position' : 'static',
        'top' : 0
    });
    $header.removeClass('prog');
  }
});

Upvotes: 1

Views: 665

Answers (1)

Nikhil Chavan
Nikhil Chavan

Reputation: 1715

Update your js, I dont understand your requirements, but i think this is what you are looking for.

if ( scrollTop > 150) {
    $toolbar.css({
        'position' : 'fixed',
        'top' : 0,
        'width':$header.width()
    });

    $header.addClass('prog');
}
else {
    $toolbar.css({
        'position' : 'static',
        'top' : 0
    });
    $header.removeClass('prog');
}

Upvotes: 1

Related Questions