keep sticky div with same width when you scroll

Question

I want sticky div to be of same width when its get sticky. right now it contains 100% width and take full area at top. My requirement is to keep it within outer div.

Fiddle example is:

JS fiddle

code:

HTML

    <div class="main-cont">
<div id="unstickyheader">
    <p>This is some text that comes before our <strong>Sticky
    Header</strong></p>

    <p>This is some text that comes before our <strong>Sticky
    Header</strong></p>

    <p>This is some text that comes before our <strong>Sticky
    Header</strong></p>
  </div>

  <div id="stickyheader">
    <table width="100%">
      <tr>
        <td>Sticky Text 1</td>

        <td>Sticky Text 2</td>

        <td>Sticky Text 3</td>

        <td>Sticky Text 4</td>

        <td>Sticky Text 5</td>
      </tr>
    </table>
  </div>

  <div id="stickyalias"></div>

  <div id="othercontent">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    </p>       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.</p>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    ulpa qui officia deserunt
    mollit anim id est laborum.</p>  
  </div>
</div>

CSS:

    table { background: black; color: white;}
            body, td {
                    font: 13px sans-serif;
            }
      .main-cont{
          width:500px;
border:2px solid red;
      }
            #stickyheader {
                    width: 100%;
                    height: 10px;
            }
            #stickyalias {
              display: none;
              height: 10px;
            }
            #unstickyheader {
              margin-bottom: 15px;
background:yellow;
width:100%;
            }
            #othercontent {
              margin-top: 20px;
            }

Script: onload

$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

Any help is much appreciated.

Thank you

Please note i have used bootstrap 3 classes. 500px is static use col-md-7 class for this. I need it responsive i cant make it fix. Sorry for fiddle example that is of fix width.

How'd like to experiment with [position sticky](http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit)? — gtramontina, Jun 23 '14 at 06:24

kamesh · Answer 1 · 2014-08-07T04:53:23.853

1

Change the CSS for strikyheader and try DEMO

#stickyheader {
                 width: inherit;//use !important and try
                 height: 10px;//use !important and try
                }

edited Aug 07 '14 at 04:53

answered Jun 23 '14 at 06:20

kamesh

2,374
3
25
33

Thank you for this suggestion (width:inherit) its working on example but not working on actual project's code. – Sharanpreet Jun 23 '14 at 06:44
Make sure any of your project CSS value is overriding .. check it using Inspect element in you browser ... – kamesh Jun 23 '14 at 06:47

score 1 · Answer 2 · edited May 23 '17 at 11:49

If the CSS property position is static or relative the width is automatically that one of the parent. To set it to 100% is not neccessary.

But if you set position to absolute the width is that one of the next parent which position is relative. If there is no parent like that it gets the width of window.

Calculate the width before and set it to the element. How do I get a computed style? or set it to inherit like @kamesh said. See this fiddle...

Nithesh Narayanan · Answer 3 · 2014-06-23T06:56:35.117

1

You can achieve this by adding a width:'500px to the stickyheader like this

 $(window).scroll(function(){
     if( $(window).scrollTop() > stickyHeaderTop ) {
          $('#stickyheader').css({position: 'fixed', top: '0px',width:'500px'});
          $('#stickyalias').css('display', 'block');
        } else {
                $('#stickyheader').css({position: 'static', top: '0px'});
                $('#stickyalias').css('display', 'none');
         }
  });

Here is the FIDDLE

Check this fiddle also . Interactive based on the width of main-cont div.

edited Jun 23 '14 at 06:56

answered Jun 23 '14 at 06:21

Nithesh Narayanan

11,481
34
98
138

I need to keep it responsive so i Cant give it fix width. You may set it to 500px to 50%. – Sharanpreet Jun 23 '14 at 06:38
ya. you can use that inner div width. i just used `500` since u have given that 500 as width of inner one. Check this fiddle http://jsfiddle.net/e8xwp/9/ – Nithesh Narayanan Jun 23 '14 at 06:51

score 0 · Answer 4 · answered Jun 23 '14 at 06:30

0

Try

Note both properties and values of .css() quoted

if ( $(window).scrollTop() > stickyHeaderTop ) {
   $('#stickyheader')
   .css({"position": 'fixed', "top": '0px', "max-width":"500px"});
   $('#stickyalias').css('display', 'block');
}

jsfiddle http://jsfiddle.net/guest271314/Q7bSp/

answered Jun 23 '14 at 06:30

guest271314

1
15
104
177

No, that's not the problem. jQuery knows both terminologies and can combine them. – algorhythm Jun 23 '14 at 06:50

keep sticky div with same width when you scroll

4 Answers4