Implementing fullPage.js for seamless scrolling with a fixed header

My website has a horizontal navigation at the top with a header image above it. I am using fullPage.js for my layout, and the default setting keeps the navbar on top at all times. However, I want the header image to only appear on the first section and be hidden on all other sections. I was considering a jQuery solution where the header margin-top would change to [header_img_height] when moving through each section, except for the first one where it should return to margin-top: 0px.

Current markup for my header:

<header>
  <div id="header_banner">
  </div>
  <ul id="nav_cont">
     <li data-menuanchor="section1">
        <a id="home_hover" href="#section1">Home</a>
     </li>
     <li data-menuanchor="section2">
        <a id="about_hover" href="#section2/1">About</a>
     </li>
     <li data-menuanchor="section3">
        <a id="gallery_hover" href="#section3">Gallery</a>
     </li>
     <li data-menuanchor="section4">
        <a id="literature_hover" href="#section4">Literature</a>
     </li>
     <li data-menuanchor="section5">
        <a id="contact_hover" href="#section5">Contact</a>
     </li>
  </ul>
</header>
<div id="fullpage">
  <div class="section" id="Home">
     <div class="container"></div>
  </div>
  .
  .
  .
other sections

This is my desired outcome:

https://i.sstatic.net/7oEy5.png

javascriptjqueryhtmlcssfullpage.js

Answer №1

If you're looking to make CSS changes, I suggest working directly with CSS code. Take a look at this helpful video tutorial which demonstrates how to apply styles using classes on the body element.

Alternatively, you can use callbacks like afterLoad or onLeave. An example of this implementation can be found in the fullpage.js files here.

To see these callbacks in action, check out the demo featuring Apple content here, with accompanying files for download available here.

Answer №2

Can this solution be helpful? When scrolling, the script adds the 'fixed-header' class to the navigation bar in the first section and removes it in subsequent sections.

$(function(){
$(window).scroll(function(){
var section1 = $('#home').offset().top;
var section2 = $('#section2').offset().top;
if($(this).scrollTop()>=section1){
$('#nav_cont').addClass('fixed-header');
}
if($(this).scrollTop()>=section2){
$('#nav_cont').removeClass('fixed-header');
}
});
});

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

What is the method for applying a style/class to an HTML element within MVC?

Within the Master page layout, I have the following structure.... <ul id="productList"> <li id="product_a" class="active"> <a href="">Product A</a> </li> <li id="product_b"> <a href="">Product B</ ...

c#htmlcssmodel-view-controller

Utilize SectionList and a custom header view on Y to achieve a translation effect that creates a visually appealing empty space as

Hello everyone, I am fairly new to React Native and the Animated API. My goal is to create a simple parallax header and an Animated SectionList similar to this demonstration. https://i.stack.imgur.com/R2GBP.gif Below is a snippet of my code: export defa ...

javascriptreactjsreact-native

Generating a Table with automatic width using the <td> tag

Allow me to clarify my thoughts. I am aiming to accomplish the following: I want to construct a table with 4 columns and multiple td (rows). However, I require each row to adjust its column width automatically based on its content. Typically, the size ...

htmlcsshtml-table

Moving files by dragging and dropping rather than deleting them

I have successfully implemented a feature using JavaScript to drag and drop multiple files, followed by displaying those images. The code below is fully functional without any errors. Need help with: I am now looking to add the ability to remove these ima ...

javascripthtmljquerydrag-and-drop

Calculate the number of days in a date range, excluding weekends

Currently, I am using the dangrossman daterangepicker and have managed to disable Saturdays and Sundays in the picker by implementing the following code: isInvalidDate: function(date){ return (date.day() == 0 || date.day() == 6);} Following that, I am c ...

javascriptjquerytwitter-bootstrapdaterangepicker

Sharing files through React and Express

I'm in the process of learning React and Node.js, and I've set myself a task to create a component that allows users to upload a file from a React app, then send it to my Express server using an API I built, and finally save the file locally on t ...

jquerynode.jsreactjsexpress

Using HTML and CSS to create a dynamic background that overlays elements

Currently working on customizing a responsive template to include new design features. My latest project involves incorporating an animated parallax background into the navigation system. Check out my progress here The background consists of 3 divs with ...

jqueryhtmlcss

Pairing strings with arrays

I'm trying to compare elements in two arrays and see if there are any matches. However, I can't seem to get it working correctly. let name; let list = ["Kat", "Jane", "Jack"]; // sample array let input = ["Hey", "i'm", "Jack"]; if (input.fo ...

javascriptnode.jsregexmatch

Passing an Integer as a string in Swift to Express using Query Strings

I'm currently facing an issue with passing a query string from Swift to Express. I am sending [String: Any] data in the following manner: let params = ["id": 1] The function I'm sending it to is performing the following actions: postSt ...

javascriptswiftexpress

I'm experiencing some compatibility issues with my script - it seems to be functioning correctly on desktops but not on mobile

Below is a script I've implemented on an html page to toggle the visibility of divs based on user interaction. <script> $(document).ready(function(){ $("#solLink").click(function(){ $(".segSlide").hide(), $(".eduSlide").hide ...

javascriptjqueryhtmlcss

Sweetalert fails to display following a successful execution of the function

Everything seems to be working fine with the Sweetalert warning after clicking the delete button, but I'm having trouble getting the confirmation alert in the ajax success function to display on the page. As a beginner in coding, I was following a tu ...

javascriptphpajaxbootstrap-4sweetalert

Node.js (Express), passport.js, mongoose.js, and Android app all have in common the HTTP Error 307 - Temporary redirect

I am currently constructing a REST Api using Node.js (Express.js and Moongose.js). I have a single post route that takes JSON data and redirects it to the signup page (/app/signup) if the user is a first-time user (not found in the database), or to the log ...

javascriptandroidnode.jsrestexpress

Execute the second method once the first method has completed its execution

As I develop my npm package, I am faced with the challenge of ensuring that one method waits for another to complete before executing. For example: var package = require('myNpmPackage'); package.method1(options); ... Later on, possibly in a dif ...

javascriptnode.jsexpressmongoosenpm

How can I update my outdated manifest v2 code to manifest v3 for my Google Chrome Extension?

Currently, I am developing an extension and using a template from a previous YouTube video that is based on manifest v2. However, I am implementing manifest v3 in my extension. Can anyone guide me on how to update this specific piece of code? "backgro ...

javascriptcssjsonchrome-extension-manifest-v3

Choose your options effortlessly with CSS or JavaScript dropdown menus

As a novice web developer, I am contemplating whether dropdown menus are more suitable to be coded in CSS or JavaScript. What are the advantages and disadvantages of each approach? ...

javascriptcss

Having trouble retrieving data from the controller in JSON format

I am having trouble getting the data from the controller to the view in JSON format, and I can't figure out why it's not working. This is my controller (I request it on the index action): public class HomeController : Controller { ...

jqueryajaxjsonmodel-view-controllercontroller

Rejuventating jQuery tabs with dynamic content using AJAX

Currently, I am working on developing a user interface that allows users to upload multiple videos, each of which will be displayed on separate tabs within a designated area on the page. When a new video is uploaded or an existing one is deleted using AJAX ...

jquerytabsreload

Error in Internet Explorer when attempting to close a Fancybox iframe that plays a YouTube video

Even the FancyApps page itself contains the error mentioned below. If you visit using Internet Explorer 9, for example, follow these steps: Go to Internet Options > Advanced > Disable script debugging (Internet Explorer). Then click on the YouTube ( ...

javascriptdebuggingiframeyoutubefancybox

Input automatically establishes default values

Something strange is happening with my HTML form. When I view it on a browser, default values are appearing in the text and password inputs that I did not set. The text input shows "creator" and the password input shows "*****". This only occurs when I set ...

htmlajax

Is it possible to use coding to determine if a user has posted a link on Facebook?

For tracking Facebook shares on my site, I am currently utilizing jQuery to register each click on the share link. However, I am seeking a more precise method. Rather than just tracking clicks, I want to track the actual "shares". Is there a way to recei ...

phpjqueryfacebook