When used simultaneously, two jQuery functions fail to operate as expected

Currently in the process of coding my portfolio, I encountered an issue with incorporating two JavaScript/jquery codes together. Firstly, for the first section to be a full-page scroll using fullpage.js "plugin," and secondly, changing the navbar to be transparent until scrolling down to a specific point where it changes background and text color.

I have tried various solutions including jQuery.noConflict but haven't been successful. Can anyone provide some assistance?

Below is the snippet of my HTML/JavaScript code including the necessary links for fullpage.js:

<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>

If required, here is the CSS styling for the navbar's color transition:

.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;
}

Your help in resolving this issue would be greatly appreciated as I've spent hours attempting to find a solution without success. Thank you in advance for your response.

Answer №1

The primary reason for the absence of firing the second function is due to the lack of a scroll event occurring. To resolve this issue, you can ensure that a scroll event takes place by including the option scrollBar: true in your fullpage function as shown below:

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

By implementing this change, the second function should now be operational.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for personalizing tooltips in Bootstrap 4

Currently, I am utilizing Bootstrap '4.0.0-alpha.6' and attempting to customize the tooltip styles. Despite adding a custom CSS class along with using Bootstrap 4, the tooltip is not responding correctly to my specified style when hovering over. ...

Inspect each chart for information and conceal any that are empty

Currently, I am attempting to analyze my highcharts graphs for data during loading and each redraw. I have successfully implemented the following code: (function (H) { var chartPrototype = H.Chart.prototype; // Display or hide graph based on da ...

Tips for retrieving the concealed input value from the div directly preceding

Is it possible for me to retrieve the hidden input value by clicking on the text "upload profile photo"? I don't have much experience in this area. <div> <input type="hidden" value='<?php echo $list['profil ...

Difficulty Communicating Recapcha 2 with the PHP Script

I am currently testing the installation of reCaptcha 2 with server-side verification using a form with one input field. My process involves sending the reCaptcha response via Ajax to a PHP page for verification. While I am able to capture the information p ...

What is the best way to incorporate Vue.js component dependencies into a multi-page application (MPA

When working with a multiple page app, incorporating a component inside another component can be challenging, especially without using a build system. $ npm install sagalbot/vue-select <template> <div id="myApp"> <v-select :value.sy ...

Why is my DIV not registering clicks when I try to interact with it?

Trying to implement a Javascript click event <script type="text/javascript"> $(document).ready(function () { $(".role").click(function () { alert("idiot"); }); }); </script> Here is the CSS code for styling the DIV with clas ...

Place a DIV over targeted text using dynamic positioning

How can I dynamically position a DIV at specific characters within a long DNA sequence displayed as a single line on a webpage, using a mono-width font and JavaScript? I want the solution to be able to adjust to changes in font size made by the user. Here ...

Exploring the latest updates in MUI modern version

The MUI documentation suggests using a modern folder with components designed for modern browsers. Is there a way to configure webpack to automatically rewrite imports like import {Box} from "@mui/material" to use the modern version without manually changi ...

Adding a property conditionally in jsx: A guide

I have a simple example of Material UI RadioGroup code that I want to display conditionally in either a row or column format. By default, it is displayed in column format. Below is the code snippet: <RadioGroup aria-label="gender" name=&q ...

Tips for avoiding the influence of the parent div's opacity on child divs within a Primeng Carousel

I'm struggling to find a solution to stop the "opacity" effect of the parent container from affecting the child containers. In my code, I want the opacity not to impact the buttons within the elements. I have tried using "radial-gradient" for multipl ...

Error message encountered in Express.js when trying to apply the ejs function: "View is not a constructor"

I am attempting to execute certain tasks before the original app.get function is called. After referring to this page, I applied their method which worked for the most part, except when using a rendering engine. The code snippet below demonstrates what I ...

What is the best way to route a localpath to a different page including parameters in Nuxt Js?

Hello, I am facing an issue where I need to pass parameters in the URL to another page in NuxtJs props: { idPending: { type: Number, required: true } }, methods: { fetchpage() { const orderId = this.idPending; this.$rou ...

python downloading and zipping files dynamically with django

I have a form with checkboxes for "audio" and "video". When a user checks one, a dynamic download is generated for that file type. If both checkboxes are checked, the audio and video files are combined into a zip file for download. I am using StringIO to a ...

Efficiently Minimize Bootstrap Components Upon Clicking the Link

I've successfully created a navigation menu that expands and collapses without using a dropdown feature. However, I'm encountering an issue where I can't seem to toggle the div when clicking on a menu link. I attempted to use JavaScript to c ...

dynamically change the information in AngularJS

I need to work with two different endpoints: http://localhost:3000/entry (POST) The keys required are: fname, lname, and age. To submit a form, we have to send a POST request to this URL. http://localhost:3000/entries (GET) This endpoint will retrieve ...

ESLint error caught off guard by function expression in customized MUI Snackbar Component with Alert

Struggling to create a personalized MUI Snackbar using the MUI Alert example from the official Documentation, but facing ESlint errors: error Unexpected function expression prefer-arrow-callback error Prop spreading is forbidden react/jsx-props-no-s ...

Angular - Dividing Values within Input Arrays

In the input field available to users, they can enter multiple inputs separated by commas. <div class="container"> Enter your values:<input type="text" multiple #inputCheck> <input type="submit"(cli ...

Utilizing the webpack CSS loader in combination with Reason-React

I am having difficulties setting up webpack for my reason app. I successfully installed webpack using this command : npm install --save-dev webpack I also installed style-loader and css-loader using this command : npm install --save-dev style-loader ...

Tips for remaining aligned on the same page after logging in

I have a project where I am creating an event registration system that shows the event registration list without refreshing the page using Ajax if the user is logged in. However, I encountered an issue when trying to login as I received an undefined index ...

Error encountered while handling document events during server-side rendering in ReactJS

I am currently developing a React.js application that requires keyboard navigation for a horizontal scrolling carousel of items. In the existing version, only the left and right arrows are used for navigation, with Enter being used to make selections. I ha ...