粘性标题的水平滚动不起作用答案

【问题标题】：Horizontal scrolling of sticky header doesn't working粘性标题的水平滚动不起作用
【发布时间】：2015-04-27 23:20:21
【问题描述】：

我的页面上有一个置顶标题，但我发现了一个错误，即当浏览器窗口较小时，置顶标题右侧的按钮不可见......并且水平滚动不适用于听众。

这里是html代码：

<div class="search-container">
   <div class="sticky-wrapper">
     <!-- it's fixed header -->
   </div>
   <div class="sidebar">
     <!-- search filters e.g. -->
   </div>
   <div class="content">
     <!-- search results e.g. -->
   </div>
</div>

这是我的 CSS (sass) 代码：

.search-container {

  .sticky-wrapper {
    box-shadow: 0 3px 3px 0 #8f8f8f;
    position: fixed;
    top: 0;
    z-index: 999;
  }

  .sidebar {
    float: left;
    margin-left: 5px;
    width: 229px;
  }

  .content {
    background: none repeat scroll 0 0 #fff;
    border-top: 4px solid #5d5d5d;
    display: inline;
    float: left;
    margin-left: 18px;
    margin-right: 0;
    width: 691px !important;
  }
}

当我使浏览器窗口小于（侧边栏 + 内容）宽度时，会出现水平滚动 - 但它仅适用于 .sidebar 和 .content。

如何使粘性标题也可以水平滚动？

附：在 FF、Chrome、IE >= 9 中工作很重要。而且我更改/添加新的 css id 或类并不好，因为许多测试都被破坏了。

请帮忙。非常感谢。

如果有帮助 - jsfiddle 带有标题和内容

【问题讨论】：

你能把它放到 jsfiddle 里吗？这会让其他人的事情变得更容易。
在你的标题上你需要width: 100%; 特别是.sticky-wrapper 类
是的，既然你已经设置了width:900px;，那么标题显然会是900px宽并且超过视口的宽度。由于您将其命名为position:fixed;，因此它的位置是相对于视口而言的，因此滚动不会对其产生任何影响。

标签： html css horizontal-scrolling sticky

【解决方案1】：

我认为单靠 CSS 无法处理这种情况。加一点JS的味道会更好。试试这个Fiddle。

添加了一个JS代码：（注：我用过JQuery，如果需要你也可以用纯JS重写）

$(window).scroll(function() {
  var max_width = 990;   
  if ($(window).width() < max_width) {
    $('.sticky-wrapper').css('margin-left', -$(this).scrollLeft() + "px");
  }
});

【讨论】：

【解决方案2】：

对于我可以测试的以及以前的经验，是在内部添加一个宽度大于容器宽度的 div，然后在该容器中添加一个 overflow-x: auto;

例如：

<div class="sticky-wrapper">
    <div class="bigger">Your text here</div>
</div>

.sticky-wrapper {
    box-shadow: 0 3px 3px 0 #8f8f8f;
    position: fixed;
    top: 0;
    z-index: 999;
    background: grey;
    width: 900px;
    overflow-x: auto;
}
.bigger {
    width: 1000px;
}

小提琴：https://jsfiddle.net/afs5k1zp/1/

【讨论】：