我有一个菜单，它将通过javascript运行，并使菜单滚动到顶部，锁定到位，然后扩展几个像素。
一个实际的例子可能是这样的：http : //www.kriesi.at/
目前我有这个：http : //jsfiddle.net/djtiii/7cauw/
的HTML
<div class="space">
<p></p>
</div>
<div id="menu">
<div class="container">
<div class="pages">
<ul>
<li>Hi,</li>
<li>how</li>
<li>are</li>
<li>you?</li>
</ul>
</div>
<div class="icons">
<img src="http://thegraphicsfairy.com/wp-content/uploads/2014/01/Valentine-Fairy-Image-GraphicsFairy.jpg">
<img src="http://thegraphicsfairy.com/wp-content/uploads/2014/01/Valentine-Fairy-Image-GraphicsFairy.jpg">
</div>
</div>
</div>
的CSS
body {
height: 600px;
min-width: 400px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}
.container {
min-width: 380px;
max-width: 380px;
padding: 0;
margin: 0 auto;
}
.space {
height: 100px;
}
#menu {
min-width: 400px;
left: 0;
right: 0;
height: 60px;
border-top: 1px solid black;
border-bottom: 1px solid black;
position: absolute;
margin: 2px 0 0 0;
}
.pages {
height: 60px;
float: left;
border-right: 1px solid black;
border-left: 1px solid black;
}
.icons {
height: 60px;
min-width: 100px;
float: right;
border-left: 1px solid black;
border-right: 1px solid black;
}
.pages li {
line-height: 60px;
display: inline-block;
margin: 0 5px 0 0;
}
.icons img {
float: right;
height: 100%;
width: auto;
}
#menu.fixed {
position: fixed;
top: 0;
z-index: 999;
margin: 0 auto;
}
的JavaScript
$(document).ready(function () {
var showStaticMenuBar = false;
$(window).scroll(function () {
if (showStaticMenuBar == false) {
if ($(window).scrollTop() >= 110) {
$('#menu').addClass('fixed');
showStaticMenuBar = true;
}
} else {
if ($(window).scrollTop() < 110) {
$('#menu').removeClass('fixed');
showStaticMenuBar = false;
}
}
});
})
滚动效果“有效”，但是由于内容的宽度固定，因此滚动效果略有破坏。如果分辨率小于该宽度，则菜单固定在顶部时，它将在右侧切断信息。是否有任何工作迫使aposition:fixed进入相对空间？
任何刺痛将不胜感激。谢谢！
不确定确切的内容，但您似乎需要进一步研究响应式网页设计。
这里有一些css技巧可能会（或可能不会）帮助...。
如果不是使用最小宽度和最大宽度，而是将宽度和最大宽度设置为100％，即
.container {
width:380px;
max-width: 100%;
}
那么宽度将为380px，但是当窗口宽度小于380像素时，宽度将变为100％。目前，您的容器始终为380px（如果它们具有相同的值，则不能设置min-width和max-width，仅使用width即可）。这就是为什么当窗口分辨率小于380px时，它会向右截断的原因。
要指定仅在窗口低于380px（或任何其他分辨率）时使用的样式，可以使用类似于以下代码。
@media screen and (max-width:380px) {
.container {
/* NEW STYLES HERE */
}
}
这意味着您无需编写适用于所有分辨率的单一样式-您可以针对不同的分辨率进行调整。这些称为断点。
如果使用的是背景图像，则可以使用background-size css属性缩放这些图像，从而可以在不同分辨率下调整它们的大小。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句