Html 粘性顶部和徽标显示

我一直在努力解决一个问题，即当激活粘性标题时显示徽标。到目前为止，我完成的菜单工作正常，但我需要在标题变粘后立即以小版本显示徽标，并保持选项居中。下面是我得到的：

一旦div变粘，我就需要这样的东西：

以下是我目前的代码：

.navbar{
背景色：#fff！重要；
}
.导航栏导航李a{
颜色：#b29b72！重要；
}
.navbar.navbar品牌{
颜色：#b29b72！重要；
}
.navbar.navbar品牌：hover{
颜色：#b29b72！重要；
}
.自定义切换器.导航栏切换器图标{
背景图像：url（“数据：image/svg+xml；charset=utf8，%3Csvg viewBox='0 32'xmlns='0http://www.w3.org/2000/svg“%3E%3Cpath stroke='rgba（178155114，0.9）'stroke width='2'stroke linecap='round'stroke miterlimit='10'd='M4 8H224M4 16h24M4 24h24'/%3E%3C/svg%3E”）；
}
/*主页*****************************************************/
.视频容器{
右边填充：0px；
左侧填充：0px；
}
#飞溅{
位置：相对位置；
文本对齐：居中；
高度：300px；
背景色：#878787；
}
#飞溅。视频{
位置：相对位置；
身高：100%；
溢出y：隐藏；
溢出x：隐藏；
边框底部：1px实心#eee；
}
#飞溅，不透明{
不透明度：0.4；
背景色：#ffffff；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}
.菜单选项{
填充顶部：12px；
}
.菜单选项a{
颜色：#b29b72；
字号：600；
字体大小：20px；
}
#菜单行{
高度：50px；
背景色：#000000！重要；
}
.菜单选项{
保证金：0；
填充：0；
}
.菜单选项ul li{
显示：内联块；
宽度：120px；
}

我梦幻般的头衔

您需要两个徽标（大-标准。小-滚动/导航）。然后执行以下操作，在代码中添加以下JQuery，但确保使用特定的类名（不是我在示例中使用的类名）

$（函数（）{var logo=$（“.lrg logo”）；$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>=500）{
如果（！logo.hasClass（“sml logo”））{
logo.hide（）；
logo.removeClass（“lrg-logo”）.addClass（“sml logo”）.fadeIn（“慢”）；
}
}否则{
如果（！logo.hasClass（“lrg logo”））{
logo.hide（）；
logo.removeClass（“sml logo”）.addClass（“lrg-logo”）.fadeIn（“慢”）；
}
}
});
});
.wrapper{
高度：2000px；
位置：相对位置；
背景：绿色；
}
标题{
位置：固定；
宽度：100%；
高度：50px；
背景：灰色；
}
.lrg标志{
宽度：300px；
高度：50px；
文本对齐：居中；
背景：红色；
}
.sml标志{
宽度：200px；
高度：20px；
文本对齐：居中；
背景：红色；
}

标志
当用户向下滚动页面时，您要做的是使用JQuery为导航栏添加一个新徽标（较小）。将添加示例代码。谢谢，这很有帮助。