Question

我正在尝试在滚动时将导航徽标更改为深色版本。我看到标题在滚动时具有类.affixed，所以我尝试使用jquery这样更改它：

$( document ).ready(function() {

if ($( "header .o_header_affix" ).hasClass("affixed")) {
$( ".navbar .navbar-brand img" ).attr( "src","http://placehold.it/220?text=Original+Logo!" );
}

});

这是HTML标记的样子：

https://prnt.sc/o1t81i

但是它不起作用。任何帮助将不胜感激！

但是，当我尝试此操作时：

$( document ).ready(function() {

$( ".navbar .navbar-brand img" ).attr( "src","http://placehold.it/220?text=Original+Logo!" );

});

它可以工作，但是它可以在任何地方更改徽标，而我只想在滚动后才更改徽标，所以当标题具有.affixed

类时

我的错误在哪里？

Answer 1

尝试从if语句中删除“标头”。

if ($( ".o_header_affix" ).hasClass("affixed")) {
$( ".navbar .navbar-brand img" ).attr( "src","http://placehold.it/220?text=Original+Logo!" );
}

https://jsfiddle.net/carlos_27/mufLbhpg/3/

Answer 2

odoo中的HTML标记是如此复杂，但是如果有人需要，我发现了一个简单的CSS解决方案。

.affixed .navbar a.navbar-brand {
  background-image: url("http://placehold.it/220?text=Original+Logo!");
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;

}

#wrapwrap .o_header_affix.affixed .navbar .navbar-brand img {
  visibility: hidden;
}

在odoo中滚动时更改导航菜单上的徽标

2 个答案: