Question

我正在使用Wordpress网站，我正在尝试在滚动时更改固定徽标。因此，当您加载页面时，它是一个徽标（logo500x398_trans.png），当您滚动到某个点时，它会更改为另一个徽标（logo500x398_trans2.png）。这是我到目前为止的javascript：

<script type="text/javascript">
jQuery(document).ready(function(){
var scrolling = jQuery(window).scrollTop();
if (scrolling > 10) {
  jQuery( "body" ).addClass("fixed-header");
  }
else {
   jQuery( "body" ).removeClass("fixed-header");
  }

jQuery(window).scroll(function() {
   var scrolling = jQuery(window).scrollTop();
   if (scrolling > 10) {
     jQuery( "body" ).addClass("fixed-header");
     newImageURL = "logo500x398_trans2.png";
     }
else {
    jQuery( "body" ).removeClass("fixed-header");
    newImageURL = "logo500x398_trans.png";
  }
 });
});

</script>

Answer 1

看看你的JSFiddle，发现你当前如何使用你的徽标设计元素样式。这是一个CSS解决方案，不需要您添加更多JavaScript。

此代码位于<head>：

中

<style type="text/css">
  .header-image .site-title > a { 
    background: url(http://209.35.52.135/~thtroofing/wp-content/uploads/2016/12/logo500x398_trans.png) no-repeat !important;
  }
</style>

为其添加规则以更改.fixed-header的图像，如下所示：

<style type="text/css">
  .header-image .site-title > a { 
    background: url(http://209.35.52.135/~thtroofing/wp-content/uploads/2016/12/logo500x398_trans.png) no-repeat !important;
  }
  .header-image.fixed-header .site-title > a { 
    background-image: url(http://209.35.52.135/~thtroofing/wp-content/uploads/2016/12/logo500x398_trans2.png) !important;
  }
</style>

Answer 2

我会为每个图像创建两个单独的css类，然后在不同的点上切换它们。另外请记住，scrolltop以像素为单位，因此10像素看起来几乎不会滚动。

.imgclass1 {
    background-image: url("1.jpg");
}
.imgclass2 {
    background-image: url("2.jpg");
}

然后像这样切换类。

$(window).scroll(function() {
   var scrolling = $(window).scrollTop();
   if (scrolling > 10) {
      $( "body" ).addClass("imgclass1");
      $("body").removeClass("imgclass2");
   } else {
      $("body").removeClass("imgclass1");
      $( "body" ).addClass("imgclass2");
}

使用Javascript在滚动上更改图像

2 个答案: