大家好，
我正在考虑托管一些广告。我正在使用官方的广告插件，它允许你在网站的各个位置添加素材，这一点很棒。
然而，与广告代理商沟通后得知，为了在移动设备上获得最佳的广告可见度（我的大部分流量都来自移动设备），最好使用固定在页眉或页脚的广告。
当然，问题在于，固定在页脚的广告会覆盖重要的按钮，影响用户体验，这是不可取的。
有没有办法在网站底部添加一个高度相当于横幅广告的填充区域，这样固定广告就不会影响重要的用户体验元素？我不希望用户在回复或使用帖子计数向下滚动帖子之前必须关闭广告横幅。
另外，对于 Discourse 的固定页眉，它会受到固定横幅广告的影响吗？或者横幅广告可以放在 Discourse 导航栏的上方吗？
或者这是广告代理商应该能够用他们的广告技术解决的问题？
谢谢，
Shane
我想我可以在 body 的底部添加一些填充，这样固定的页脚广告横幅就不会覆盖回复按钮，然后在弹出的回复控件框上，我或许可以设置一个 z-index，使其显示在广告横幅之上？
只是想知道是否有人成功地在移动设备上实现了固定的页眉和/或页脚广告横幅，而没有影响用户体验。
你好 
这是可能的，但这取决于很多事情。你能分享你的网站网址吗？
我将使用插件出口并将横幅放在里面。将插件出口的高度设置为与横幅高度相等，这将添加必要的空间。
类似这样。注意：这只是一个快速示例，我希望它能给你一些实现它的想法。如果你分享更多信息和你的网站网址来检查等等，我们可以做得更多 
移动端 / 头部
<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
<div class="test-top-banner"></div>
</script>
<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
<div class="test-bottom-banner"></div>
</script>
移动端 / CSS
body {
--banner-height: 40px;
.d-header-wrap {
top: var(--banner-height);
}
.above-site-header-outlet.top-banner {
@include sticky;
top: 0;
width: 100%;
height: var(--banner-height);
z-index: z("header");
.test-top-banner {
width: 100%;
height: var(--banner-height);
background: red;
}
}
.below-footer-outlet.bottom-banner {
@include sticky;
bottom: env(safe-area-inset-bottom);
width: 100%;
height: var(--banner-height);
z-index: z("header");
.test-bottom-banner {
width: 100%;
height: var(--banner-height);
background: red;
}
}
#topic-progress-wrapper:not(.docked) {
margin-bottom: var(--banner-height);
}
}
嗨 @Don - 感谢您的回复，我猜想可能需要这样的东西。
你好 @Don，当你在手机上回复时，这个实现会如何工作？
可以正常工作，但顶部横幅使编辑器变小。
打开编辑器时最好隐藏横幅。
有一个类 .composer-open，您可以在此处定位它，以便在编辑器打开时隐藏横幅。
body {
--banner-height: 40px;
// Header
.d-header-wrap {
top: var(--banner-height);
transition: top 0.25s ease-in;
.composer-open & {
top: 0;
}
}
// Top banner
.above-site-header-outlet.top-banner {
@include sticky;
top: 0;
width: 100%;
height: var(--banner-height);
transition: height 0.25s ease-in;
z-index: z("header");
.test-top-banner {
width: 100%;
height: var(--banner-height);
background: red;
transition: height 0.25s ease-in;
.composer-open & {
height: 0;
}
}
.composer-open & {
height: 0;
}
}
// Bottom banner
.below-footer-outlet.bottom-banner {
@include sticky;
bottom: env(safe-area-inset-bottom);
width: 100%;
height: var(--banner-height);
z-index: z("header");
.test-bottom-banner {
width: 100%;
height: var(--banner-height);
background: red;
}
}
// Move topic progress wrapper the top of the bottom banner
#topic-progress-wrapper:not(.docked) {
margin-bottom: var(--banner-height);
.composer-open & {
margin-bottom: 0;
}
}
// Add banner height to composer max height calculation
&:not(.ios-safari-composer-hacks) #reply-control.open {
max-height: calc(100vh - var(--header-offset) + var(--banner-height));
}
}
编辑：我对代码做了一些修正。
非常感谢您的帮助，太棒了！
嘿 @Don - 我在手机上测试了一下，运行得很棒，现在将其添加到桌面端，看起来应该能正常工作，但在回复时有一个小问题，与手机端不同的是，手机端的固定区域会消失，而桌面端则会停留在原地，是否有用于桌面端编辑器打开的 CSS 钩子？
您好 @Don - 有什么办法可以在桌面版上关闭页脚吗？移动版效果很好，但我似乎无法弄清楚如何在桌面版上通过点击回复来打开回复框时移除固定的元素，这超出了我的 CSS 技能水平。
谢谢
您好 @Shaneod
抱歉延迟回复。我上面写的代码放在了移动端部分，所以只能在移动端运行。我已将代码修改为也适用于桌面端。您需要将其放置在公共部分，并删除移动端中已有的代码。
这是更新后的代码，同时适用于桌面端和移动端。
<script type="text/x-handlebars" data-template-name="/connectors/above-site-header/top-banner">
<div class="test-top-banner"></div>
</script>
<script type="text/x-handlebars" data-template-name="/connectors/below-footer/bottom-banner">
<div class="test-bottom-banner"></div>
</script>
body {
--banner-height: 40px;
}
.d-header-wrap {
top: var(--banner-height);
transition: top 0.25s ease-in;
.composer-open & {
top: 0;
}
}
.sidebar-wrapper {
html:not(.composer-open) & {
height: calc(var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px) - var(--banner-height));
}
}
.above-site-header-outlet.top-banner {
@include sticky;
top: 0;
width: 100%;
height: var(--banner-height);
transition: height 0.25s ease-in;
z-index: z("header");
.test-top-banner {
width: 100%;
height: var(--banner-height);
background: red;
}
.composer-open & {
height: 0;
}
}
.below-footer-outlet.bottom-banner {
@include sticky;
bottom: env(safe-area-inset-bottom);
width: 100%;
html:not(.composer-open) & {
height: var(--banner-height);
}
z-index: z("composer", "content") - 1;
.test-bottom-banner {
width: 100%;
height: var(--banner-height);
background: red;
}
}
#topic-progress-wrapper:not(.docked) {
margin-bottom: var(--banner-height);
.composer-open & {
margin-bottom: 0;
}
}
body:not(.ios-safari-composer-hacks) #reply-control.open {
max-height: calc(100vh - var(--header-offset) + var(--banner-height));
}
谷歌广告可以在这些地区展示吗？@Don
谢谢 @Don，非常感谢，哥们！ 
是的，我在页脚区域放置了一个固定广告。Don 在您回复时隐藏了固定区域，这样广告就不会干扰网站的可用性！
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.