javascript - 需要在选项卡菜单中向下滚动时隐藏背景图像

Question

我有一个包含图像的导航菜单，如下所示:-![导航img][1]

我需要在向下滚动时立即隐藏图像。我尝试使用 Jquery 插件，但没有成功。这是我的导航代码:

HTML:

<div id="tabs">
  <ul>
    <li id="menu1">
      <a href="#tabs-3">Clothing &<br/>Accessories
        <img src="images/home/menu1.png">
      </a>
    </li>
    <li id="menu2">
      <a href="#tabs-1">Home & <br/>Furniture</a>
    </li>
    <li id="menu3">
      <a href="#tabs-2" style="padding-top: 19px;">Electronics</a>
    </li> 
    <li id="menu4">
      <a href="#tabs-4">Fresh Food <br/>& Groceries</a>
    </li> 
    <li id="menu5">
      <a href="#tabs-5">Fresh Food <br/>& Groceries</a>
    </li>
    <li id="menu6">
      <a href="#tabs-6">Fresh Food <br/>& Groceries</a>
    </li>
  </ul>
</div>

另请参阅图片所在的 CSS 部分:

#menu1{
     border-right: 1px solid #949494;
     background-image: url('../images/home/menu1.png');
     background-repeat: no-repeat;
    background-position: 119px 13px;
    background-size: 33%;
}

#menu2{
      border-right: 1px solid #949494;
     background-image: url('../images/home/menu2.png');
     background-repeat: no-repeat;
     background-position: 100px 1px;
}
#menu3{
      border-right: 1px solid #949494;
      background-image: url('../images/home/menu3.png');
       background-repeat: no-repeat;
      background-position: 95px -10px;
}

如果您还需要什么，请告诉我。

另请参阅该网站的链接。

[站点][2]

提前致谢。

Answer 1

如果您只想隐藏/显示背景图片:

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
     $('#tabs li').css('background','none');
    } else {
       $('#tabs li').css('background','');
    }
});

---

下面的演示

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
     $('#tabs li').css('background','none');
    } else {
       $('#tabs li').css('background','');
    }
});

body {
    height: 2000px;
} 
#menu1
  {
     border-right: 1px solid #949494;
     background-image: url('http://lorempixel.com/400/200');
     background-repeat: no-repeat;
    background-position: 119px 13px;
    background-size: 33%;
  }

  #menu2
   {
      border-right: 1px solid #949494;
     background-image: url('http://lorempixel.com/400/200');
     background-repeat: no-repeat;
     background-position: 100px 1px;
   }
   #menu3
    {
      border-right: 1px solid #949494;
      background-image: url('http://lorempixel.com/400/200');
       background-repeat: no-repeat;
      background-position: 95px -10px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tabs">
    <ul>
        <li id="menu1"><a href="#tabs-3">Clothing &<br/>Accessories<img src="images/home/menu1.png"> </a></li>
            <li id="menu2"><a href="#tabs-1">Home & <br/>Furniture</a></li>
            <li id="menu3"><a href="#tabs-2" style="padding-top: 19px;">Electronics</a></li> 
            <li id="menu4"><a href="#tabs-4">Fresh Food <br/>& Groceries</a></li> 
            <li id="menu5"><a href="#tabs-5">Fresh Food <br/>& Groceries</a></li>
            <li id="menu6"><a href="#tabs-6">Fresh Food <br/>& Groceries</a></li>
        </ul>
    </div>

Fiddle demo