添加類當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刪除

回答

相關問題