How to hide other div apart from touched div to the band

  • A+
Category:Languages

I want to hide other divs apart from touched div to the band

the band is this element <div class="center-band"></div>

whenever the scrolling element touches the element <div class="center-band"></div> then it has to be shown, and other divs have to be hidden

Question: only touched div to the band has to be shown, and others has to be hidden, that means only one content has to be shown at a time.

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>

Note: I don't want to change scrolling content approach (question is not about positioning)

Please help me thanks in advance!!!!

 


you can try this code. css:

.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; } 

js:

$(function() {     var pos = 1;     var ii = 0;      function effect() {          $('.contents').each(function(){             if ( $('.center-band').offset().top - $(this).offset().top >5) {                 // $('.contents').hide();                 // alert('shit');                 $('.contents').removeClass('show');                 $(this).addClass('show');             }         });     }      var intId = setInterval(function()     {         ii++;         pos = - ii;         //console.log(pos);          $('.container').css({             transform: 'translateY(' + pos + 'px)'         });          effect();      }, 100); }); 

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: