【问题标题】:Best way to change bootstrap navbar brand logo image after scrolling?滚动后更改引导导航栏品牌徽标图像的最佳方法?
【发布时间】:2015-04-28 01:43:29
【问题描述】:

按照我的设置方式,一旦滚动到标题部分,导航栏就会从透明变为纯色,用于 1 页站点的其余部分。链接、样式等在添加/删除 css 类的函数中发生变化,具体取决于它是否超过标题。

但是,我将如何更换新徽标?我不确定如何更改这样的实际元素,而不仅仅是附加一个 CSS 类。这是一个 .png 文件,当导航栏改变颜色时,我想要一个不同的标志,它的样式不同,以便显示。另外,是否有可能转换标志的变化而不是戏剧性的跳跃?提前致谢。

【问题讨论】:

  • 请提供链接或JSFilddle。
  • 我真的不需要代码我只是不确定我可以使用什么函数或方法来实际更改基于滚动的徽标图像。
  • 我做了一个这样的导航栏,滚动后logo会变,从红色变成白色,我用JQuery做的,很简单。
  • 关于方法:当达到断点切换两个徽标的 CSS 类(1 个可见,1 个不可见)时,将它们绝对定位,以便它们堆叠起来!

标签: javascript jquery html css twitter-bootstrap


【解决方案1】:

做到这一点的一个好方法是在父 div 中将 2 个图像绝对放置在彼此的顶部。然后有一个类将opacity: 1 设置为顶部的图像,带有transition,并在滚动时删除该类,使其具有opacity: 0

【讨论】:

  • 啊,鬼鬼祟祟!我喜欢它。
猜你喜欢
  • 1970-01-01
  • 2021-12-05
  • 1970-01-01
  • 1970-01-01
  • 2019-03-16
  • 2015-06-23
  • 2014-05-21
  • 1970-01-01
  • 2023-03-06
相关资源
最近更新 更多