在CSS / HTML中创建固定/粘性徽标

Question

我想知道是否有人可以帮助我创建一个固定/粘性标题...不太确定如何使用CSS或HTML实现这一点（对不起，我是一个新手）。

我的网站是http://www.oliviafialkow.com/，我希望我的徽标保持固定，因为访问者向下滚动页面，如下例所示：http://lockebride.tumblr.com/

任何帮助都会很精彩 - 谢谢！

---

我的标题HTML如下：

            <div class="logo">
                {{^customize.images.logo.url}}
                <!--No Logo-->
                <h1><a href="{{site.url}}">{{site.title}}</a></h1>
                {{/customize.images.logo.url}}
                {{#customize.images.logo.url}}
                <!--Logo Uploaded-->
                <h1><a href="{{site.url}}" title="Home"><img src="{{customize.images.logo.url}}" alt="{{site.title}}"></a></h1>
                {{/customize.images.logo.url}}
            </div>

我的标题CSS是：

/***** site_name color *****/
.logo h1 a {
    color: {{{customize.colors.site_name}}};
}


/***** subtitle color *****/
.logo h2 {
    color: {{{customize.colors.subtitle}}};
    position: fixed
}

谢谢！

Answer 1

与position: fixed一起，你还需要提供top: 0和left: calc(50% - [width of your logo]

将其添加到您的.logo div中：

position: fixed;
top: 0;
left: calc(50% - 80px);
z-index: 10;

然后，徽标将从文档流中取出，因此您应添加某种间隔符以填充徽标图像最初占用的空间。

Answer 2

我经常使用这个解决方案：

position: fixed;
width: [your-width-here]
margin: auto;

这将自动居中;你的CSS中没有奇怪的计算或~48％的计算。

---

但是，如果您想要完全镜像您提到的页面上显示的内容：

.parent-div {
    float: right;
    right: 50%;
    position: fixed;
    z-index: 19999;
}

.child-div {
    position: relative;
    float: right;
    right: -50%;
}

Answer 3

像这样编辑你的CSS

#site-header {
 padding-top: 110px;
 margin-bottom: 50px;
}

#site-header .logo h1 img {
 width: 100%;
}

.logo {
 font-size: 100%;
 position: fixed;
 left: 45%;
 top: -21px;
 width: 10%;
 z-index: 1000;
}

重要的是，您必须使用png徽标。

Answer 4

试试吧

.logo {
    left: 50%;
    position: fixed;
    top: -20px;
}

为了使徽标真正居中，你需要一个内部的第二个div，边距为左：50％

在您的情况下，您只需将边距添加到CSS第91行中的＃site-header .logo h1类：

#site-header .logo h1 {
    margin-left: -50%;
    font-size: 1.8em;
    line-height: 1.2;
    text-align: center;
}

通常你会去

<div class="logo" style="left: 50%; position: fixed;">
    <div style="margin-left: -50%;">
    // Your logo goes here
    </div>
</div>

Answer 5

固定位置是最简单的解决方案，我为你做了一个jsFiddle ......好吧...小提琴:)看看如何实现你想要的：jsFiddle。请注意，你需要一个透明的png标志来使它看起来应该（你目前是一个白色背景的jpeg）。

.logo-placeholder {
    height: 180px; /* height of your logo */
}
.logo {
    position:fixed;
    top:0;
    right:0;
    left:0;
    height:180px;
    text-align:center;
    z-index: 100;
}

.logo-placeholder只保留通常由您的徽标占据的空间，该徽标现在“浮动”在页面的其余内容之上。所以你需要将它添加到你的HTML：

<div class="logo-placeholder"></div>
<div class="logo">
    <!-- your not modified html -->
</div>

这应该适用于两种变体：图像（如果已上载）或文本（如果没有）。

但是，我可以看到您的网页是响应式的，只是将您的徽标更改为position:fixed可能会破坏用户体验和移动设备上的视觉效果。 iOS设备（目前在移动浏览方面最重要）不喜欢固定定位并且在滚动方面有一些奇怪的行为：它们只在你滚动结束时更新元素的位置，而不是在你做的时候更新（像普通桌面浏览器一样）。这会导致您的徽标在滚动时遍布整个地方。

此外，在小型移动屏幕上使用这样的大徽标将占据大部分视口，这也不好（更不用说由于徽标重叠按钮等引起的导航问题）。

所以，如果我是你，我会添加这个CSS，让你的改变根本不影响移动：

@media only screen and (max-width: 600px) {
    .logo {
        position: static; /* that is just default positioning */
    }
    .logo-placeholder {
        display:none; /* we don't need tht anymore since logo is back on its place :) */
    }
}

这里是媒体查询版本的小提琴：jsFiddle - 您可以缩放视口以查看它是否正常工作。