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

如果您只想隐藏/显示背景图像：

$(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>

小提琴演示

在移动设备上 - 但您要做的是 $.on "滚动"，如果您不在 scrollTop=0（对于正在滚动的主对象），请对包含背景图像的项目应用一个新类 （$.addClass）。

这个新类很简单：

.newclass {background-image:none !important}

还要检查当您达到 scrollTop 0 时，您是否 $.removeClass 您的新类，以便图像显示备份。

如果你想给它添加一些漂亮的东西，在你的新类中，使用 CSS3 过渡，比如 .25s 左右。

您可以使用<li>中添加图像，而不是使用background-image。

然后使用$(window).scrollTop()知道你是否在顶部，然后使用条件语句显示或隐藏你的<img>。示例如下：

j查询：

$(window).scroll(function () {
    if ($(window).scrollTop() > 60) { //where 60 is the height of your header
        $('img').fadeOut('fast');    // or you can keep it 0 as well, no issues..
    } else {
        $('img').fadeIn('fast');
    }
});

好吧，演示的其余部分在这里

告诉这是否适合您...

祝你好运:)

你需要这样的东西吗？

将图像作为div 的背景并设置background-attachment: fixed;

.test1 {
    background-image: url(http://www.64k.it/andres/data/test_video/TestCard.gif);
    height: 400px;
    background-attachment: fixed;
}
.test2 {
    height: 800px;
    background-color: gray;
}

<div class="test1"></div>
<div class="test2">Bye bye</div>

更新

以这种方式尝试

.classTest{
   background-image: none;
}

然后使用 jquery 检查滚动事件

var delta = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > delta){
       // scroll down remove class classTest
   } else {
      // scroll up add background image when reach the top of the page (or top + image height)

      if($(window).scrollTop() ==0) {
       // alert("top!"); add background image class
      }
   }
   delta = st;
});

试试这个，不需要插件，使用滚动顶部：

(function(){
   var wsSrollTop = $(window).scrollTop();
   var offsetTopLimit = 0;
    if ($(window).scrollTop() >= offsetTopLimit) {
        $('#menu2').fadeOut();
    };
 })()

您还需要在滚动窗口时调用它。

这是更新的小提琴。