How to add a class to the div when article visible on screen?

Question

I am displaying articles horizontally on the mouse wheel. I have to display the menu div on top when articles 5 comes on the screen. I mean I want to add class to the element when it gets visible on screen when scrolling. I tried some script but it not working.

I set display:none on the class .about_menu and using the script I am adding the class .active display: block but how can I identify the articles 05 come on screen?

Would you help me out in this?

$(window).on('scroll', function(){
       if ($(".active_05").is(':visible')){
             $(".about_menu").addClass("active");
        }
     });


 (function() {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('gentags').scrollLeft -= (delta*40); // Multiplied by 40
        e.preventDefault();
    }
    if (document.getElementById('gentags').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
    }
})();

#gentags {
position:relative;
margin-top: -.25em;
display: inline-block;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}

#gentags > div{
    overflow: hidden;
    width:200%;
}

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: transparent;
}

.horizontal_scroll .full_screen_100 article{
    width: 16.58%;
    height: 100%;
    float:left;
    border-left: solid 1px #E2E2E2;

}
.active{
    display: block !important;
}
.about_menu{
position: fixed;
width: 100%;
text-align: center;
display: none;
}
    .about_menu .about_menu_wrapper ul.about_menu_list{
        list-style: none;
        text-decoration: none;
    }

    .about_menu .about_menu_wrapper ul.about_menu_list li{
        display: inline-block;
        text-decoration: none;
        margin: 10px;
    }
    .about_menu .about_menu_wrapper ul.about_menu_list li a{
    font-size: 18px;
    color: red
    }

.about_menu .about_menu_wrapper ul.about_menu_list li a:hover{
    color: #000;
        }

<div class="about_menu">
    <div class="about_menu_wrapper">
        <ul class="about_menu_list">
            <li><a href="">About  us</a></li>
           <li><a href="">Team</a></li>
           <li><a href="">Clients</a></li>
        </ul>
    </div>
</div>

<div id="gentags">
   <div class="horizontal_scroll">
  <div class="full_screen_100" id="left_scroll">
   <article><div><p class="scroll_number">01</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
   <article><div><p class="scroll_number">02</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
   <article><div><p class="scroll_number">03</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
   <article><div><p class="scroll_number">04</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
   <article class=" active_05"><div><p class="scroll_number">05</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
   <article><div><p class="scroll_number">06</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
  </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Maybe this will help: https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling — Billy Moat, Nov 20 '17 at 11:12
I'd try just coping the code than modifying 'Usage' piece of code to deal with the elements you need to show/hide. — Billy Moat, Nov 20 '17 at 11:30

Znaneswar · Accepted Answer · 2017-11-20T11:59:16.757

Try this https://jsfiddle.net/wy9o3oh8/1/

Find right side offset of the active_05 if it is >0 then show menu

 var rt = ($(window).width() - ($(".active_05").offset().left ));
  if(rt>0)
 {
   $(".about_menu").addClass("active");
 }

 (function() {

    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('gentags').scrollLeft -= (delta*40); // Multiplied by 40
       var rt = ($(window).width() - ($(".active_05").offset().left ));
    if(rt>200)
    {
      $(".about_menu").addClass("active");
    }
    else
    {
      $(".about_menu").removeClass("active");
    }
    
        e.preventDefault();
    }
    if (document.getElementById('gentags').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('gentags').addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        document.getElementById('gentags').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        document.getElementById('gentags').attachEvent("onmousewheel", scrollHorizontally);
    }
})();

#gentags {
position:relative;
margin-top: -.25em;
display: inline-block;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}

#gentags > div{
    overflow: hidden;
    width:200%;
}

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: transparent;
}

.horizontal_scroll .full_screen_100 article{
    width: 16.58%;
    height: 100%;
    float:left;
    border-left: solid 1px #E2E2E2;

}
.active{
    display: block !important;
}
.about_menu{
position: fixed;
width: 100%;
text-align: center;
display: none;
}
    .about_menu .about_menu_wrapper ul.about_menu_list{
        list-style: none;
        text-decoration: none;
    }

    .about_menu .about_menu_wrapper ul.about_menu_list li{
        display: inline-block;
        text-decoration: none;
        margin: 10px;
    }
    .about_menu .about_menu_wrapper ul.about_menu_list li a{
    font-size: 18px;
    color: red
    }

.about_menu .about_menu_wrapper ul.about_menu_list li a:hover{
    color: #000;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="about_menu">
    <div class="about_menu_wrapper">
        <ul class="about_menu_list">
            <li><a href="">About  us</a></li>
           <li><a href="">Team</a></li>
           <li><a href="">Clients</a></li>
        </ul>
    </div>
</div>

<div id="gentags">
   <div class="horizontal_scroll">
  <div class="full_screen_100" id="left_scroll">
   <article><div><p class="scroll_number">01</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
   <article><div><p class="scroll_number">02</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
   <article><div><p class="scroll_number">03</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
   <article><div><p class="scroll_number">04</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
   <article class=" active_05"><div><p class="scroll_number">05</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
   <article><div><p class="scroll_number">06</p><span class="page_slogan">Lorem ipsum dolor sit amet, </span></div></article>
  </div>
    </div>
</div>

From your comment check this updated version

https://jsfiddle.net/wy9o3oh8/3/

change the value of 50 how you want

Your code is working in snippet as well as jsfiddle but I have two doubts. First one how do I again set display none when article 05 not on screen. I mean reverse scroll. Second doubt is can I set some width I mean when article 05 comes 200px on screen then display div? — Naren Verma, Nov 20 '17 at 11:33
I think there is some miss communication in the second doubt.when article 05 comes 200px on screen then display menu div. — Naren Verma, Nov 20 '17 at 11:45
Yes, When I added if(rt>200 then it's working perfectly.Thanks for the help. upvote form my side.Update your answer. — Naren Verma, Nov 20 '17 at 11:50
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159385/discussion-between-znaneswar-and-narendra-verma). — Znaneswar, Nov 20 '17 at 11:50

How to add a class to the div when article visible on screen?

1 Answers1