添加类当X类已通过JS删除

我想添加一个类到一个div时，另一个类已被删除与JS。添加类当X类已通过JS删除

这是我的HTML：

<body class="homepage"> 

<div id="wrap"> 

    <div id="projects"> 
     <section id="project-0" class="slide active"> Slide 1</section> 
     <section id="project-1" class="slide active"> Slide 2</section> 
     <section id="project-2" class="slide active"> Slide 3</section> 
    </div> 
</div> 
<div class="content"> Website main content </div>

这是一个上下滑动，所以当你向下滚动，在active类与JS去除。我想要实现的是在project-2中删除active时向body添加一个类。

这是我到目前为止，而是因为它已经通过JS加不承认阶级active ...

if(!$("#project-2").hasClass("active")){ 
    $("body").addClass("shifted"); 
}

JS：

var delta = 0; 
var currentSlideIndex = 0; 
var scrollThreshold = 30; 
var slides = $(".slide"); 
var numSlides = slides.length; 
function elementScroll (e) { 
    console.log (Math.abs(delta)); 
    // --- Scrolling up --- 
    if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) { 

    delta--; 

    if (Math.abs(delta) >= scrollThreshold) { 
    prevSlide(); 
    } 
    } 

    // --- Scrolling down --- 
    else { 

    delta++; 

    if (delta >= scrollThreshold) { 
     nextSlide(); 
    } 
    } 

    // Prevent page from scrolling 
    return false; 
} 


function showSlide() { 

    // reset 
    delta = 0; 

    slides.each(function(i, slide) { 
    $(slide).toggleClass('active', (i >= currentSlideIndex)); 
    }); 

} 


function prevSlide() { 

    currentSlideIndex--; 

    if (currentSlideIndex < 0) { 
    currentSlideIndex = 0; 
    } 

    showSlide(); 
} 

function nextSlide() { 

    currentSlideIndex++; 

    if (currentSlideIndex > numSlides) { 
    currentSlideIndex = numSlides; 
    } 

    showSlide(); 
} 

$(window).on({ 
    'DOMMouseScroll mousewheel': elementScroll 
});

You can see here how it works 感谢

来源

2017-05-31 patie

请包括所有相关的代码，就像当你通过这种方式滚动 –

它不是可能的，除去活跃的部分。最好查看垂直滑块文档并检查它支持的事件。几乎所有流行的滑盖/ carousal都支持它。我们需要定位的事件就像幻灯片停用或类似的事情。 – vijayP

我试图做类似于：http：//www.hugeinc.com/，但我找不到使它像他们一样工作的方式... – patie

通过查看你的JS代码，我相信你想添加class到body同时向下滚动。你可以试试下面的代码：

function prevSlide() { 

    currentSlideIndex--; 

    if(currentSlideIndex == (numSlides-1)) 
    { 
     $("body").removeClass("shifted"); // remove the class from body 
    } 
    if (currentSlideIndex < 0) { 
     currentSlideIndex = 0; 
    } 

    showSlide(); 
} 

function nextSlide() { 

    currentSlideIndex++; 

    if (currentSlideIndex > numSlides) { 
     currentSlideIndex = numSlides; 

     $("body").addClass("shifted"); // add the class to body 

    } 

    showSlide(); 
}

来源

2017-05-31 10:24:53 vijayP

感谢您的答案。我开始与JS，所以我不知道如何解决它...但你的代码不适合我... – patie

@patie - 你可以检查https://codepen.io/anon/pen/ QvepVr。它的修改稍微比这个答案。 for'.shifted'我已经添加了背景颜色作为黄色用于测试目的 – vijayP

你是对的！我做错了。你能帮助我解决最后一件事吗？我粘贴了一些内容：https：//codepen.io/anon/pen/QvepVr但它不可滚动，你知道为什么吗？ – patie

您的检查缺乏类只开始一次。你有100毫秒的时间间隔要做到这一点，或任何你想要的：

setInterval(function() 
{ 
    if (!$("#project-2").hasClass("active")){ 
     $("body").addClass("shifted"); 
    } 
}, 100);

来源

2017-05-31 10:23:08 Sascha

添加类当X类已通过JS删除

回答

相关问题