Question

我正在开发一个个人网站（我猜是一个投资组合网站），当浏览器窗口被完全筛选时，我会看到我想要的东西，但当窗口缩小时，部分会被切断（当然）。我正在使用Windows 7，并始终在屏幕的两侧停靠一个窗口。让我的网站工作以便在浏览器完全筛选时将某些部分固定到位非常棒，但是一旦浏览器窗口达到一定大小，它们就会随着窗口的缩小而移入。这可能吗？这需要JavaScript（我根本不擅长）吗？

这是指向相关页面的屏幕截图的链接，第三张图片被购买以显示我想要发生的事情： http://imgur.com/a/EDWjh#0

我希望侧窗导航（左侧的黑框/文字）和徽标（右上角，也链接到我的索引页面）在窗口很大时固定，但是要捏（并且是齐平的）当它缩小时，与浏览器窗口的两侧相同。

相关作品的CSS是：

#blackbox{
    background-color: black;
    width: 175px;
    height: 180px;
    left: 50%;
    margin-left: 355px;
    margin-top: -20px;
    position: fixed;
    z-index:4;
}

#navleft{
    width: 175px;
    height:430px;
    background-color:black;
    position: fixed;
    margin-top: -50px;
    left: 50%;
    margin-left:-530px;
}

相关的HTML只是div，右上方的黑框有一个标识图像的部分，链接到我的索引页面，左侧的导航文本链接到其他页面。

对于它的价值，页面的内容是一个1060px宽的容器。

我希望你们中的一些人可以帮助我，我希望解决方案不会太难。非常感谢您提供的所有时间和指导，我很乐意回答任何问题。谢谢！

Answer 1

现代浏览器（支持CSS版本3的浏览器）不需要JavaScript。您可以使用media queries根据视口的宽度提供不同的CSS。

链接文章中的示例：

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

Answer 2

<强> @media

正如Chris正确指出的那样，您可以使用媒体查询来执行此操作而无需使用javascript。请参见此处： jsfiddle

请注意，同样适用于jQuery示例 - jsfiddle在调整页面大小时移动中间栏，使用完整浏览器页面时不会发生这种情况。

相关的CSS是：

@media screen and (min-width: 400px) {
    .testPos
    {
        right:auto;
        left:200px;
    }
}

<强>的jQuery

这是一个简单的示例，其输入显示如何使用jquery执行此操作：jsfiddle

输入将处于固定位置，直到窗口调整为太小，然后它将粘在右侧。 注意：因为jsfiddle中间栏根据大小移动，输入也会最初移动，这不会发生在正常的窗口上，在这个窗口中，未调整大小的浏览器的一侧是固定的（注意与酒吧的距离将是恒定的。）

根据窗口大小添加和删除css类：

.naturalPos
{
    left:200px;    
}

.stickRight
{    
    right:0px;
}

Answer 3

如果您需要使用Javascript工作，可以使用window.resize事件来包装调整页面所需的任何功能：

window.onresize = function(event) {
    ...
}

仅在窗口缩小时才使元素水平移动

3 个答案: