當他們在一起時，兩個jQuery函數不起作用

我目前正在編寫我的投資組合，並且我想讓我的第一個部分在稍後成爲一個圖像，因此我使用了整頁。 JS「插件」，它的工作。然後，我希望我的導航欄透明，當我向下滾動到例如600px時，它會更改背景和文本顏色，並且它也起作用。當他們在一起時，兩個jQuery函數不起作用

但問題是，當他們在一起時，這兩個javascript/jquery代碼不起作用...我嘗試了一切，如jQuery.noConflict等...但沒有任何工作，所以任何人都可以幫助我嗎？

這是我的HTML與所有的javascrip鏈接fullpage.js/Javascript代碼中工作：

<script type="text/javascript"> 
    $(document).ready(function() { 
//Automatically scroll the first section, then normal scroll 
     $('#fullpage').fullpage({ 
      scrollOverflow: true, 
      normalScrollElements: '.a-text-field' 
     }); 
    }); 
    $(window).scroll(function() { 
//Change navbar background/text color after scrolling 650px 
     $('nav').toggleClass('scrolled', $(this).scrollTop() > 650); 
     $('a').toggleClass('scrolledlink', $(this).scrollTop() > 650); 
    }); 

</script> 
</head>

如果需要的話，我將導航欄的CSS改變背景顏色和文字顏色：

.nav { 
font-family: "brandon-grotesque", Arial, Helvetica, sans-serif; 
font-weight: 700; 
font-size: 12px; 
letter-spacing: 0.3em; 
position: fixed; 
width: 100%; 
height: 60px; 
z-index: 9999999; 
transition: 500ms ease; 
background: transparent; 
} 

.nav.scrolled { 
font-family: "brandon-grotesque", Arial, Helvetica, sans-serif; 
font-weight: 700; 
font-size: 12px; 
letter-spacing: 0.3em; 
position: fixed; 
width: 100%; 
height: 60px; 
background-color: #F3F3F3; 
border-bottom: 1px solid rgba(49, 49, 49, 0.1); 
z-index: 99999; 
} 

.nav>ul>li>a { 
position: relative; 
text-decoration: none; 
color: white; 
transition: 0.30s; 
} 

.a.scrolledlink { 
position: relative; 
text-decoration: none; 
color: black; 
transition: 0.30s; 
}

我希望有人能幫助我找到一個解決我的問題，因爲它的東西，我真正想做的事情，和我想了好幾個小時，沒有發現任何解決方案... 感謝的提前通過爲了您的迴應。

來源

2017-09-07 Greg Lalle

檢查您的控制檯是否存在代碼中的錯誤。同時確保'scrolloverflow.min.js'不依賴於jQuery，因爲你事先包含了它。 –

我檢查了控制檯，代碼中沒有錯誤。而對於scrolloverflow.min.js，它不依賴於jQuery，我可以在之前或之後添加jQuery，整頁滾動工作，但它是JS代碼的第二部分，它沒有工作... –

第二個函數不能觸發的原因是因爲沒有發生滾動事件。如果添加選項，scrollBar: true你的全頁的功能是這樣的：

$(document).ready(function() { 
    //Automatically scroll the first section, then normal scroll 
    $('#fullpage').fullpage({ 
    scrollOverflow: true, 
    normalScrollElements: '.a-text-field', 
    scrollBar: true 
    }); 
});

它將工作。

來源

2017-09-07 15:40:29 Zorken17

哦，好吧！非常感謝，我永遠不會認爲這是真的！它似乎工作！ ;） –

不客氣！但是這個選項的缺點是你會在頁面的右側得到一個滾動條。 – Zorken17

哦，是的..有沒有辦法隱藏它？ –

當他們在一起時，兩個jQuery函數不起作用

回答

相關問題