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

Question

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

fiddle 的例子是:

JS fiddle

代码:

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 类。我需要它响应我无法修复它。抱歉，固定宽度的 fiddle 示例。

Answer 1

您可以通过将 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 的宽度进行交互。