在使用fullpage.js滾動固定元素後，添加或刪除css類

使用fullpage.js構建固定頁面的頁面。這裏是粗略的例子>https://pages.devex.com/Fixed-Scroll-Test.html 在使用fullpage.js滾動固定元素後，添加或刪除css類

我想在滾動到第二部分（比如說是彩色：白色）後向「logo」（固定在左上角）添加一個額外的類。

我想實現這個目標，因爲我將使用黑色和白色背景，並且我希望在導航元素中具有良好的對比度。

我正在使用這樣的東西，但我不工作，也許它干擾fullpage.js？

 if ($('body').scrollTop() > $('#section1').position.top) { 
      $('.devexlogo').addClass('white'); 
     }

來源

2016-03-03 Nicolás Muiño

謝謝大家爲你解答。

幸運的是，fullpage.js將一個特殊的類賦給活動部分。就像fp-viewing-sectionname

所以我最終指出，要爲需要更改的元素指定特殊的css規則。

這裁判幫了不少忙：https://www.youtube.com/watch?v=qiCVPpI9l3M

來源

2016-03-05 18:10:03

-1

您只能加載一次代碼片段（這會導致不添加類）。

你想是這樣的：

$("#fullpage").scroll(function(){ 
    //your code here 
});

確保容器調用此函數對連接到它的overflow: scroll CSS屬性！在這裏看到更多：https://api.jquery.com/scroll/

來源

2016-03-03 22:53:57 abhi

fullpage.js不會讓你與滾動事件玩，除非你使用fullpagej.s選項'滾動條：TRUE' – Alvaro

看起來像jQuery獲取窗口的scrollTop（）方式的fullpage.js messes，但fullpage.js實際上有一些內置的東西可以幫助你做到這一點。在onLeave部件添加到您的代碼

$(document).ready(function() { 
     $('#fullpage').fullpage({ 
      anchors: ['firstPage', 'secondPage', '3rdPage'], 
      sectionsColor: ['#999999', '#F1F1F1', '#7E8F7C'], 
      navigation: true, 
      navigationPosition: 'right', 
      navigationTooltips: ['First page', 'Second page', 'Third and last page'], 
      responsiveWidth: 900, 
      onLeave: function(index, nextIndex, direction){ 
       if (nextIndex != 1){ 
        $('.devexlogo').addClass('white'); 
       } else { 
        $('.devexlogo').removeClass('white'); 
       } 
      } 
     }); 
    });

作爲一個側面說明，反正你的代碼有錯誤，你錯過了()。它本來是

$('#section1').position().top

來源

2016-03-03 23:05:38 Bradley4

在使用fullpage.js滾動固定元素後，添加或刪除css類

回答

相關問題