javascript - 当文章在屏幕上可见时如何向 div 添加类？

Question

我在鼠标滚轮上水平显示文章。当第 5 篇文章出现在屏幕上时，我必须在顶部显示菜单 div。我的意思是我想在元素滚动时在屏幕上可见时向该元素添加类。我尝试了一些脚本，但它不起作用。

我在类 .about_menu 上设置了 display:none 并使用脚本添加了类 .active display: block 但我如何识别文章 05 出现在屏幕上？

你能帮我解决这个问题吗？

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

Answer 1

试试这个 https://jsfiddle.net/wy9o3oh8/1/

找到 active_05 的右侧偏移量，如果它是 >0 然后显示菜单

 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>

根据您的评论检查此更新版本

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

根据需要更改 50 的值