在滚动时更改活动类
[英]change active class on scroll
问题描述
Hi Developer , I want to know how to add Active class on next child on specific scroll amount like 100px.
嗨开发人员，我想知道如何在下一个孩子的特定滚动量（如 100px）上添加 Active 类。 how I can define in jquery?我如何在 jquery 中定义？ if anyone helps me that would be good for me.如果有人帮助我，那对我有好处。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="slider"> <li class="active"> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> </ul> <script> $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.section1 li').addClass('active'); } else { $('.section1 li').removeClass('active'); } }); </script>
1 个解决方案
解决方案1
1 2019-06-18 16:02:55
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> body{ overflow-x: hidden; padding-top: 50px; } .slider{ padding: 0px; margin: 0px; } .slider li{ display: block;padding: 30px; margin-bottom: 30px; } .active { background-color: #4a3c31e3; color: #fff; } .active { position: relative; right: -100%; display: block; width: 100%; opacity: 1; visibility: visible; background: blue; -webkit-animation: slide 1s forwards; -webkit-animation-delay: 1s; animation: slide 1s forwards; } @-webkit-keyframes slide { 100% { right: 0%; } } @keyframes slide { 100% { right: 0%; } } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="slider"> <li class="active"> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> <li> Rationpora repellat recusandae mollitia, amet. Qui, minima ad ullam.</li> </ul> <script> $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.section1 li').addClass('active'); } else { $('.section1 li').removeClass('active'); } }); </script> <script> $(document).ready(function() { var timeStart = 0; function wheely(e) { var y = e.originalEvent.deltaY; var timeStop = new Date().getTime(); var timeDiff = timeStop - timeStart; if (timeDiff > 200) { if (y > 0) { nextSlide(); } if (y < 0) { prevSlide(); } } timeStart = timeStop; } function prevSlide() { if ($('.active').is(':first-child')) { if (!$('.slider').hasClass('dragging')) { $('.slide:first-child').addClass('bounce'); setTimeout(function() { $('.slide:first-child').removeClass('bounce'); }, 300); } } else { $('.active').removeClass('active').addClass('queue').prev().removeClass('prev').addClass('active'); } } function nextSlide() { if ($('.active').is(':last-child')) { if (!$('.slider').hasClass('dragging')) { $('.slide:last-child').addClass('bounce'); setTimeout(function() { $('.slide:last-child').removeClass('bounce'); }, 300); } } else { $('.active').removeClass('active').addClass('prev').next().removeClass('queue').addClass('active'); } } function hotkeys(e) { if (e.keyCode == 38) { prevSlide(); } if (e.keyCode == 40) { e.preventDefault(); nextSlide(); } } function dragStart(e) { e.preventDefault(); if (e.type == 'touchstart') { $(document).off('mousedown', dragStart); startPoint = e.originalEvent.touches[0].pageY; } else { startPoint = e.pageY; } dragDist = 0; $(document).on('touchmove mousemove', dragMove); } function dragMove(e) { if (e.type == 'touchmove') { var movePoint = e.originalEvent.touches[0].pageY; } else { var movePoint = e.pageY; } dragDist = (movePoint - startPoint) / $('.slider').height() * 100; $('.slider').addClass('dragging'); $('.slide, .bg').css({ transition: '0ms' }); if (dragDist < 0) { $('.active .bg').css({ opacity: 1 + (dragDist / 200) }); $('.active').css({ transform: 'translate3d(0,' + (dragDist / 2) + '%,0)' }).next().css({ transform: 'translate3d(0,' + (100 + dragDist) + '%,0)' }); } if (dragDist > 0) { $('.active').css({ transform: 'translate3d(0,' + dragDist + '%,0)' }).prev().css({ animation: 'none', transform: 'translate3d(0,' + (-50 + dragDist / 2) + '%,0)' }).find('.bg').css({ opacity: 0.5 + (dragDist / 200) }); } } function dragEnd() { $(document).off('touchmove mousemove', dragMove); $('.slide, .bg').removeAttr('style'); if (dragDist > 20) { prevSlide(); } if (dragDist < -20) { nextSlide(); } setTimeout(function() { $('.slider').removeClass('dragging'); }, 800); } $(document).on('wheel', wheely); $(document).on('keydown', hotkeys); $(document).on('touchstart mousedown', dragStart); $(document).on('touchend mouseup', dragEnd); }); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
滚动更改导航活动类 - Change navigation active class on scroll
在窗口滚动上更改导航活动类 - Change navigation active class on window scroll
如何更改滚动导航栏的活动 class - How to change active class of the navbar on scroll
在滚动上添加class = active - Add class=active on scroll
将滚动条上的活动状态更改为视口 - Change active state on scroll to viewport
活动班级的平滑滚动导航 - smooth scroll navigation with active class
在滚动中使用JQuery切换类活动 - Toggle Class Active with JQuery On Scroll
在滚动上更改li活动类 - Changing li active class on scroll
更改菜单类处于活动状态 - change menu class active
使用 jQuery 更改活动类 - Change class active with jQuery
相关标签