调整浏览器大小时，如何防止我的固定定位元素滚动？答案

【问题标题】：How can I prevent my fixed positioned elements from scrolling when the browser is resized?调整浏览器大小时，如何防止我的固定定位元素滚动？
【发布时间】：2015-12-11 17:26:34
【问题描述】：

首先我必须说我在这方面的学习曲线非常好，而且网站项目是我在业余时间作为礼物送给某人的，所以我的知识有限，尽管我认为我了解基本知识。还请注意，我确实有另一个更基本、不太有趣的站点，它已经作为备份构建，所以如果我被告知我的所有代码都是垃圾并且我需要重新开始，我不会心碎！

我正在为化妆师创建一个单页、水平滚动的作品集网站，这需要我在左侧有一个带有菜单列表的固定横幅，并且使用 javascript，页面滚动得很好并顺利到达相关部分。

在我的屏幕分辨率上，一切看起来都很棒，我的浏览器大小合适，但我注意到，如果我缩小浏览器窗口，固定导航横幅开始滚动到不合适的位置，而其他一切都保持在一起它应该。

最终结果应该是所有内容都保持原位，唯一的“移动部分”是滚动部分的内容，因此当调整浏览器大小时，所有内容都会重新调整大小或至少一起滚动。

我尝试过将所有内容包装在内容 div 中，并且尝试过不同的定位，但似乎没有任何效果。

这是我对这些部分的基本 html 布局：

<html>
<body>

<div id="banner"> <!--this is the fixed nav banner-->
<ul>
    <li><a href="#portfolio">PORTFOLIO</a></li>
    <li><a href="#about">ABOUT</a></li>
    <li><a href="#testimonials">TESTIMONIALS</a></li>
    <li><a href="#contact">CONTACT</a></li>
</ul>
</div>

<div id="portfolio" class="bigpanel">
<div id="portfolioimages">
    <!--IMAGES GO HERE-->
</div>
</div>

<div id="about" class="panel">
</div>

<div id="testimonials" class="bigpanel">
</div>

<div id="contact" class="bigpanel">
</div>

<div id="footer">
</div>

</body>
</html>

...和 CSS：

body {
    width: 15000px;
    height: 580px;
    background-color: #fcf4f1;
    position: absolute;
    margin: 2% 0 5% 0;
}

#footer {
    position: fixed;
    left: 935px;
    top: 645px;
    margin: 10px;
}

#banner {
    position: fixed;
    height: 580px;
    width: 200px;
    background-color: #fff;
    opacity: 0.8;
    line-height: 20px;
    margin: 45px 0px 0px 20px;
    padding: 0;
    z-index: 999;
}

.panel {
    width: 930px;
    float: left;
    padding-left: 242px;
    padding-right: 1040px;
    margin-top: 45px;
}

.bigpanel {
    float: left;
    padding-left: 242px;
    padding-right: 1040px;
    margin-top:45px;
}

Pic of how the site is at the correct size

...and a pic of how it looks when it's squished in height!

我已经尽力做到了，所以抱歉太长了！

任何帮助将不胜感激。

【问题讨论】：

如果你把它放在小提琴中，我可以玩它
似乎你想要的是将横幅固定在水平方向而不是垂直方向，以便它始终保持距离窗口左侧 20px，但不必距离窗口 45px窗口顶部。它是否正确？如果是这样，这不能单独使用 HTML 和 CSS 来完成。你也在使用 Javascript 吗？
@SamJacobs 你太棒了，但是当我说我正处于一个巨大的学习曲线上时——我什至不知道该怎么做哈哈。我现在就调查一下。
@snookieordie 我认为您可能是对的，尽管该站点的最终目标是所有内容都符合设定的高度。目标是网站的主体（除背景颜色和页脚中的版权声明外的所有内容）位于中间的水平条带内（当前高度为 580 像素），并且整个内容仅水平移动，并且如果调整了某个内容的大小，一切都一起调整大小。而javascript目前仅用于水平平滑滚动！
jsfiddle.net，把正确的代码放在正确的地方，点击保存，然后发布链接:)

标签： html css css-position fixed horizontal-scrolling

【解决方案1】：

好的，我不知道我是否有适合所有人的答案，但它肯定适合我。

我基本上仔细研究了我是如何定义网站中基本上所有元素的宽度和高度的，并发现虽然需要为主体和横幅固定宽度，但高度可以是响应式的取决于视口大小。

我将所有内容都包裹在一个非常宽的包装 div 中，高度设置为 100%，但将主体高度设置为 84vh，最大高度为 700 像素（因此我的图像可以具有相同的最大高度并且始终看起来好）。

这样我还可以将横幅设置为高度：84vh，最大高度为 700 像素，因此它永远不会溢出，但总是缩小。

我将包装器的边距设置为垂直居中，现在虽然所有东西都适合它的容器，但没有垂直滚动！

我敢肯定，其中很多都是一个丑陋的解决方案，是由于我的编码错误造成的，但现在可以了！

【讨论】：

【解决方案2】：

我觉得你必须在#banner div 上使用top 属性，把它放到0 上。这仅适用于fixed、absolute、relative 等位置。无论如何，它都会将您的 div 固定在浏览器窗口的顶部。 它是 div 相对于屏幕 to 的“顶部填充”（距离）。

所以你应该添加

top: 0;

到

#banner

它应该可以工作！

如果你想看看它的功效，我建议你看看这个代码笔：http://codepen.io/Symsym/pen/LsjCK

干杯！告诉我它是否有效。

【讨论】：

【解决方案3】：

<body>
<div class="banner"> <!--this is the fixed nav banner-->
  <ul>
  <li><a href="#portfolio">PORTFOLIO</a></li>
  <li><a href="#about">ABOUT</a></li>
  <li><a href="#testimonials">TESTIMONIALS</a></li>
  <li><a href="#contact">CONTACT</a></li>
  </ul>
</div>
<div class='content'>
  <div id="portfolio" class="bigpanel">
  <div id="portfolioimages">
      <!--IMAGES GO HERE-->
  </div>
  </div>

  <div id="about" class="panel">
    about
  </div>

  <div id="testimonials" class="bigpanel">
   testimonials
  </div>

  <div id="contact" class="bigpanel">
   contact
  </div>
</div>
<div class="footer">
 footer is here!!
</div>

css代码：

body {
    background-color: '#fcf4f1';
    overflow:hidden;
}

a{
  text-decoration:none;
}

li{
  list-style:none;
}

.banner {
    position: fixed;
    width: 200px;
    background-color: '#ccc';
    opacity: 0.8;
    padding: 0;
    z-index: 999;
    top:20px;
    left:0;
}

.content{
  width:800px;
  margin-left:200px;
  overflow:auto;
  float:left;
}

.panel {
    margin-top:10px;
    width: 930px;
    float: left;
}

.bigpanel {
    float: left;
    margin-top:20px;
}

.footer {
    position: fixed;
    bottom: 0;
    left:0;
    right:0;
    background:red;
    margin: 10px;
}

您可以滚动内容。

【讨论】：