Question

我希望粘性div在粘性时具有相同的宽度。它现在它包含100％的宽度，并在顶部占据整个区域。我的要求是将它保持在外部div。

小提琴的例子是：

代码：

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

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

非常感谢任何帮助。

谢谢

请注意我使用了bootstrap 3类。 500px是静态使用col-md-7类。我需要它响应我不能让它修复。很抱歉这是一个固定宽度的小提琴示例。

Answer 1

更改strikyheader的CSS并尝试DEMO

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

Answer 2

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

但是，如果您将position设置为绝对宽度，那么position为relative的下一个父项之一就是inherit。如果没有这样的父母那就得到了窗口的宽度。

计算之前的宽度并将其设置为元素。 How do I get a computed style?或将其设置为{{1}}，就像@kamesh所说的那样。见fiddle ...

Answer 3

您可以通过向width:'500px添加stickyheader来实现此目标

 $(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');
         }
  });

以下是FIDDLE

同时检查this fiddle。基于main-cont div的宽度进行交互。

Answer 4

尝试

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

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

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

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

4 个答案: