html - 网站设计 - 固定在顶部并展开的滚动菜单

Question

我有一个菜单，它将通过 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;
            }
        }
    });
})

滚动效果“有效”，但由于内容是固定宽度而略有损坏。如果分辨率小于该宽度，则当菜单固定在顶部时，它会切断右侧的信息。是否有任何解决方法可以将 position:fixed 强制放入相对空间？

对此的任何尝试都将不胜感激。谢谢!

Answer 1

不确定确切您在这里的目的是什么，但看起来您需要进一步研究响应式网页设计。

这里的一些 css 技巧可能(或可能没有)有帮助....

如果不使用最小宽度和最大宽度，而是将宽度和最大宽度设置为 100%，即

.container {
    width:380px;
    max-width: 100%;
}

则宽度将为 380px，但当窗口小于 380 像素宽时将变为 100%。目前，您的容器始终为 380 像素(如果它们具有相同的值，则无需设置最小宽度和最大宽度，只需使用宽度即可)。这就是为什么当窗口分辨率小于 380px 时，它会向右截断。

要指定仅当窗​​口低于 380 像素(或任何其他分辨率)时使用的样式，您可以使用类似于以下的代码。

@media screen and (max-width:380px) {
    .container {
        /* NEW STYLES HERE */
    }
}

这意味着您无需编写适用于所有分辨率的单一样式 - 您可以针对不同的分辨率对其进行调整。这些称为断点。

如果您使用背景图片，您可以使用 background-size css 属性缩放它们，这允许它们在不同的分辨率下调整大小。