Question

我想将其他divs隐藏到乐队以外的其他地方

乐队是这个元素<div class="center-band"></div>

每当滚动元素touches为元素<div class="center-band"></div>时，都必须显示该元素，而其他div必须隐藏

问题：仅显示touched div到band的{{1}}，这意味着必须显示hidden，这意味着只有一个content必须一次显示。

jsbin： https://jsbin.com/zudideheza/edit?html,css,js,console,output

$(function()
{
    var pos = 1;
    var ii = 0;

    var intId = setInterval(function()
    {
        ii++;
        pos = - ii;
        //console.log(pos);

        $('.container').css({
            transform: 'translateY(' + pos + 'px)'
        });
    }, 100);
});

.container {
    width: 100%;
    height: 100%;
    background: #000000d6;
    font-size: 19px;
    color: #a19999;
    position: relative;
}

.contents {
    margin-bottom: 15px;
    border-bottom: 1px solid #424242;
    padding: 20px;
}

.center-band {
    width: 98%;
    height: 78px;
    z-index: 200;
    background: #b4b1b147;
    position: fixed;
    top: 50%;
}

.wrapper {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
<div class="container" style="transform:translateY(0px);">
  <div class="contents"> (1)  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
  <div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
  <div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
  <div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
  <div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
  <div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
  <div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
  <div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
  <div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
  <div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>      
</div>

<div class="center-band"></div>

</div>

注意：我不想更改滚动内容的方法（问题不在于定位）

请提前帮助我！!!!

Answer 1

尝试一下：

$(function()
{
var pos = 1;
var ii = 0;



var intId = setInterval(function()
{
    ii++;
    pos = - ii;
    //console.log(pos);

    $('.inner-content').css({
        transform: 'translateY(' + pos + 'px)'
    });


}, 100);
});

.container {
    width: 100%;
    height: 100%;
    background: #000000d6;
    font-size: 19px;
    color: #a19999;
    position: relative;
}

.contents {
    margin-bottom: 15px;
    border-bottom: 1px solid #424242;
    padding: 20px;
    /*visibility:hidden;*/
}
.show{
    /*visibility: visible;*/
}

.center-band {
    width: 98%;
    height: 78px;
    z-index: 200;
    background: #b4b1b147;
    position: fixed;
    top: 50%;
}

.wrapper {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class=" center-band"  style="overflow-y:hidden;">

      <div class="inner-content" style=" transform:translateY(0px);">
        <div class="contents"> (1)  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
        <div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
        <div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
        <div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
        <div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
        <div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
        <div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
        <div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
        <div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
        <div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>    
      </div>

    </div>
  </div>          
</div>

Answer 2

这不是您问题的直接答案，而是解决此问题的另一种方法。也许这会以某种方式帮助您。

var domRect = document.getElementById('center-band').getBoundingClientRect();
var centerBandTop = domRect.top+20;
var centerBandBottom = domRect.top + 58;

$(function(){
   var pos = 1;
   var ii = 0;
   var intId = setInterval(function(){
    ii++;
    pos =- ii;
    $('.container').css({
         transform   :  'translateY('+pos+'px)'
    });
  

    $('.contents').each(function(idx,ele){
         var domContent = document.getElementsByClassName('contents')[idx].getBoundingClientRect();
        // console.log(idx +'---'+  domContent.top) 
         if(domContent.top < centerBandBottom && domContent.bottom > centerBandTop ){
                 //$(ele).text('');
         }
         else{
                //$(ele).css('color','#fff');
         }
  })
   },100);
});

.container{
z-index:999;
   width: 100%;
    height: 100%;
    /*background: #222;*/
    font-size: 19px;
    color: #222;
    position: relative;
}

.contents{
    margin-bottom: 15px;
   /* border-bottom: 1px solid #424242;*/
    padding: 20px;
    color:#fff;
}

#center-band{
    width: 98%;
    height: 78px;
    
    background: #222;
    position: fixed;
    top: 50%;
}

.wrapper{
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container" style="transform:translateY(0px);">
  <div class="contents"> (1)  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugit eius perferendis veritatis accusantium corporis nulla alias sed possimus quibusdam reiciendis nisi maiores inventore error, incidunt eveniet ut asperiores officiis.</div>
  <div class="contents">(2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, distinctio temporibus facere, laboriosam doloribus error quaerat ipsa, non nobis rerum mollitia quibusdam quas illo a qui consequuntur consectetur deleniti saepe.</div>
  <div class="contents">(3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, sed, atque. Adipisci quasi debitis, soluta praesentium distinctio impedit veritatis officia molestias culpa fuga excepturi voluptates suscipit aliquam ea unde, non!</div>
  <div class="contents">(4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, incidunt, harum. Perferendis ipsum, molestias nihil sequi nam nulla, aliquid ipsa numquam cum! Perferendis ut voluptates hic excepturi dolores, ipsum impedit.</div>
  <div class="contents">(5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim itaque debitis voluptates, reiciendis dolorum, labore eius. Illum similique ex, iusto rerum ratione minima, corporis aspernatur aliquam, itaque numquam sint enim!</div>
  <div class="contents">(6) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint numquam totam, a aliquam veritatis porro ullam! Nostrum sint ipsum odio aperiam deserunt aut placeat dignissimos est ad, quae vitae aliquid.</div>
  <div class="contents">(7) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quos atque enim, alias culpa quibusdam ratione, beatae non possimus, velit eaque. Optio qui saepe, earum harum beatae maxime obcaecati minima.</div>
  <div class="contents">(8) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic id incidunt sapiente, magni, sequi ea molestiae iure maxime delectus doloribus error assumenda veritatis maiores saepe nihil neque autem similique obcaecati!</div>
  <div class="contents">(9) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum velit hic iure nam nulla natus corrupti eveniet, suscipit voluptates nostrum. Cupiditate vero ipsam alias fuga, magnam voluptas deserunt corporis non!</div>
  <div class="contents">(10) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae voluptatibus accusamus pariatur? Ipsum nobis ratione fuga, voluptates quam placeat officia odit eveniet aliquam, eaque quisquam tenetur! Exercitationem maxime vel quas!</div>
  
</div>
    <div id="center-band"> </div>
</div>

Answer 3

这取决于是否要包含边距，但是可以使用以下方法检测位置，然后将类over应用于当前悬停的.content div：

$(function() {
  var pos = 1;
  var ii = 0;

  var centerbandTop = $('.center-band').offset().top;
  var centerbandBottom = $('.center-band').outerHeight() + centerbandTop;

  var intId = setInterval(function() {
    ii++;
    pos = -ii;

    $('.contents').each(function() {
      var $content = $(this);
      var contentTop = $content.offset().top;
      var contentBottom = $content.outerHeight() + contentTop;

      $content.removeClass('over');

      if (centerbandBottom > contentTop && centerbandTop < contentBottom)
        $content.addClass('over');
    });

    $('.container').css({
      // '-webkit-transform' : 'translate(0,' + pos + ')',
      transform: 'translateY(' + pos + 'px)'
    });

  }, 100);
});

演示：http://plnkr.co/edit/YwaPy3qz07goW5ZfwARl

如何将其他div隐藏到触摸的div到乐队之外

3 个答案: