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

Answer 2

尝试此操作，无需插件，请使用scrolltop：

(function(){

   var wsSrollTop = $(window).scrollTop();
   var offsetTopLimit = 0;

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

 })()

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

Here is the UPDATED fiddle

Answer 3

你需要这样的东西吗？

将图像作为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;
});

Answer 4

在移动设备上 - 但你想要做的是$ .on“scroll”，如果你不是在scrollTop = 0（对于正在滚动的主要对象），请将一个新类（$ .addClass）应用到你的其中包含背景图片的项目。

这个新课程很简单：

.newclass {background-image:none !important}

另外检查当你到达scrollTop 0时，你$ .removeClass你的新类，所以图像显示备份。

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

Answer 5

您可以在background-image。

中添加图片，而不是使用<li>

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

<强> jQuery的：

$(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');
    }
});

演示的其余部分是here

告诉你这是否适合你......

祝你好运：）

需要隐藏背景图像在标签菜单中向下滚动

5 个答案: