图像和文本作为标志

支持
1

你好。

我为我的论坛设置了“徽标”图片，同时也设置了“标题”。

目前，在页眉中仅显示“徽标”。我希望让“标题”显示在徽标右侧。我希望它的格式与向下滚动页面时主题标题显示在徽标旁边的格式相同——即默认显示徽标和站点标题，当滚动到某个主题时，该主题的标题会替换站点标题。

这可以实现吗？我搜索了谷歌，但没找到解决方案。

谢谢。

2

如果你也想要文字，为什么不直接设计一个包含文字的标志呢？

3

你可以这样做：

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "这是一些文本";
}

image
image1004×394 21.3 KB

不过，你仍然需要在不需要显示它的地方将其隐藏，例如当主题标题显示时：

image
image994×402 20.6 KB

你可以通过在具有 archetype-regular 正文类的页面上不显示它（这样它就不会出现在任何主题页面上），或者使用 JavaScript 使其消失（就像在大图标和小图标之间根据滚动状态进行切换一样）来实现这一点。

5

非常感谢您的回复，太好了！

您知道需要什么样的 JavaScript 代码才能让它像您提到的那样消失吗？那将非常棒。

6

试试这个

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Here is some text";
}
.archetype-regular #main.no-text .d-header .title::after,
.archetype-private_message #main.no-text .d-header .title::after  {
    display:none;
}

<script>
    $(document).ready(function() {
    	$(window).scroll(function(){
    		checkScroll()
        }); 
    
    	function checkScroll() {
    		var y = $(window).scrollTop();		
    		if (y > 55) {
                document.getElementById("main").classList.add('no-text');
            } else {
                document.getElementById("main").classList.remove('no-text');
            }
    	}
    	checkScroll();
    });
</script>

作为组件的版本如下：

7

非常感谢！这太完美了。