滚动时保持相同宽度的粘性div。

Question

我想当它变粘的时候，它的宽度是一样的。现在它包含100%的宽度，并占据顶部的全部区域。我的要求是把它保持在外域内。

小提琴的例子是：

JS小提琴

代码：

    <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;
            }

脚本: 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');
                }
        });
  });

任何帮助都是非常感谢的。

谢谢

请注意，我使用了引导3类。500 md是静态的-md-7类。我需要它的响应，我不能让它修好。对不起，小提琴的宽度是固定的.

Answer 1

更改strikyheader的CSS并尝试演示

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

Answer 2

如果CSS属性position为static或relative，则宽度自动为父属性之一。将其设置为100%并不是必要的。

但是，如果将position设置为绝对，则宽度是下一个父级的宽度，position是relative。如果没有这样的父级，它会得到窗口的宽度。

计算前面的宽度并将其设置为元素。如何获得计算样式？或者设置为inherit，就像卡梅什说的那样。看这个小提琴..。

Answer 3

试一试

请注意引用的.css()的属性和值

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

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