CODEWITHSUNDEEP
jqueryhtmlcss
Alex Zahir
Alex Zahir

Reputation: 969

Make fixed positioned div inherit width of parent instead of body

I am trying to implement a sticky header on my HTML page where when the user scroll downs the header sticks to the top of the page.

I have implemented the sticky header functionality but I am facing a problem that when the div class="header-content" becomes fixed at the top of the page it overflows the width of the container it is in and tries to take the width of the whole 'body'. I want this sticky header to be 100% of its container's width.

My HTML is here:

<div class="container">
    <header id="header" role="banner">
            <div class="search">
                <form id="searchForm" action="#" method="get">
                    <input class="form-control search-input" name="q" id="q" placeholder="Search..." type="text" required />
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit">Button</button>
                    </span>
                </form>
            </div>

            <div class="header-content">
                <ul class="social-icons">
                    <li>List Item</li>  
                    <li>List Item</li>  
                    <li>List Item</li>  
                    <li>List Item</li>
                 </ul>

                <div class="logo">
                    <h1>Sample Logo</h1>
                </div>

            </div><!-- end header-content -->   
        </header><!-- end header -->

       <div id="main">
           <h2>Heading Goes Here</h2>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <h3>Second Heading Goes Here</h3>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <h2>Heading Goes Here</h2>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>
           <h3>Second Heading Goes Here</h3>
           <p>Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog.</p>

       </div><!-- end main -->

</div><!-- end container -->

The CSS:

.container {width: 600px; margin: auto; background: #eee;} 
#header {width: 100%;}
.header-content {width: 100%; z-index: 400;}
.sticky {position: fixed; top: 0; transition: all 0.4s ease; background: red;}

The jQuery for the sticky header: 

     $(window).scroll(function() {
        if ($(this).scrollTop() > 30){  
            $('.header-content').addClass("sticky");
          }
          else{
            $('.header-content').removeClass("sticky");
          }
      });

I also made a JSFiddle so you can see this issue in real-time. You can view it here:
https://jsfiddle.net/eng94871/

Notice that when you scroll down and the header is sticky at the top(the div with the red background) it overflows its container (the div with the gray background). I want to force it to have 100% width of the gray background.

Upvotes: 0

Views: 210

Answers (3)

guest271314
guest271314

Reputation: 1

Try setting .sticky width to calc(100%) , which should be 100% of sticky parent #header element

jsfiddle https://jsfiddle.net/eng94871/5/embedded/result/

Upvotes: 0

user5488195
user5488195

Reputation: 11

Try setting containers to one width:

.container, .sticky, .header-content {
     width: 600px;
}

jsfiddle

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337570

The issue is because position: fixed elements are not in the usual document flow, and so their width is taken to be 100% of the window. You can fix this by specifying the same width property on the element as on .container. Also note that you would need to change transition: all to transition: background-color otherwise the width is animated, which I don't believe is the effect you're after. Try this:

.sticky {
    width: 600px;
    transition: background-color 0.4s ease;
    /* other properties... *.
}

Example fiddle

Upvotes: 1

Related Questions