当他们在一起时，两个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函数不起作用

回答

相关问题