在 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，其中 margin-left: 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 设备（目前在移动浏览方面最重要）不喜欢固定定位，并且在滚动方面有一些奇怪的行为：它们只会在您结束滚动时更新元素的位置，而不是在您滚动时更新（就像普通的桌面浏览器一样）。这会导致您的徽标在滚动时到处乱跳。

另外，在小手机屏幕上使用这么大的 logo 会占据大部分的视口，这也不好（更不用说由于 logo 重叠按钮等导致的导航问题）。

所以，如果我是你，我会添加这个 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 - 您可以缩放视口以查看它是否正常工作。