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％。目前，您的容器总是380px（没有点设置最小宽度和最大宽度，如果它们具有相同的值，只需使用宽度）。这就是为什么当窗口分辨率小于380px时，它会向右切断。

要指定仅在窗口低于380px（或任何其他分辨率）时使用的样式，您可以使用类似于以下内容的代码。

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

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

如果您使用的是背景图像，则可以使用background-size css属性对其进行缩放，这样可以在不同的分辨率下调整它们的大小。

Answer 2

更改＃menu.fixed to this left：0; right：0; top：0; z-index：999; margin：auto; position：fixed;

网站设计 - 滚动菜单，修复在顶部并展开

2 个答案: