Header Blocks that are Fixed While Scrolling in fullPage.js Sections Using the "scrollOverflow: true" Feature

I am experiencing an issue where a fixed header on my website prevents scrolling through sections when hovering, specifically when the setting scrollOverflow: true is enabled.

However, everything works fine and scrolling through all sections is possible when the fixed header is not being hovered over.

Is there a way to enable browsing through sections while still hovering over the fixed header?

To see this issue in action, you can check out the isolated reproduction here: https://jsfiddle.net/o5Lcpemw/1/

Here are the steps to reproduce it:

  1. Hover over the fixed red header
  2. Attempt to scroll through the blue, grey, and green sections

This issue has been observed on MacOS High Sierra using the latest Chrome Release.

javascriptcssfullpage.js

Answer №1

To prevent the header from responding to mouse events, simply set the element's pointer-events property to 'none':

#header {
  ...
  pointer-events: none;
}

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 changes should I make to my save function in order to handle both saving and editing user information seamlessly?

My goal for the save function is to achieve two tasks: 1. Save user in table - Completed 2. Update user in table - In progress Save function snippet: var buildUser = function () { $('#save').click(function () { var newUser = {}; ...

javascriptjqueryhtml

Arranging an array of integers followed by sorting by the decimal part of each value in a particular sequence using JavaScript

Below is an example of sorting an array: let arr = ['100.12', '100.8', '100.11', '100.9']; When sorted traditionally, the output is: '100.11', '100.12', '100.8', '100.9' Ho ...

javascriptarraystypescriptsorting

Adding a backslash in Angular: Tips and Tricks

I have a question about adding a backslash to a string that is returned from a div, for example Car1 \sold. Although I am able to retrieve the status, I am having trouble adding the backslash. Here is what I have tried so far: <span>{{addBackl ...

javascriptangularjshtmlangulartypescript

Trouble with value updating in PostgreSQL with NodeJs

var express = require('express'); var app = express(); var pg = require('pg'); var connectionString = "postgresql://postgres:sujay123@localhost:3001/redc"; app.use(express.static('public')); app.get('/index.h ...

javascriptsqlnode.jspostgresql

Use jQuery to create a price filter that dynamically sets slide values based on the filter object

I'm currently utilizing the jQuery slide filter to sort products based on price. The filtering value is set within the script, but I am interested in dynamically setting it based on the highest/lowest number found on my page using a data attribute. D ...

javascriptjqueryhtml

Ensuring accuracy within a personalized directive that is implemented numerous times within a single webpage (AngularJS)

Recently, I designed a unique directive that includes various inputs and dropdowns. To ensure proper binding between the outer and inner scopes for two-way data binding, I implemented an isolate scope. This setup allows me to reuse the directive multiple t ...

javascriptangularjsangularjs-directive

Tips on including variables within quotation marks in JavaScript

I'm currently working on a JavaScript project using Pug. My goal is to use Express and MongoDB to develop a CRUD application that generates an edit button for each post, triggering a specific event when clicked. However, instead of the desired resul ...

javascripthtmlpug

Can someone guide me on how to align text to the bottom border of a page?

Is there a way to adjust the position of the header text ("bottom text") so that it appears just above the bottom border of the page? I have attempted modifying styles and classes within the footer, style, and h3 tags but have not had any success. Below ...

htmlcsstextborder

Selecting the appropriate technology or library for incorporating user-defined text along a designated path within established areas

I am currently developing an admin dashboard with CodeIgniter 2 that allows the admin to upload custom images, particularly ones with blank spaces for text overlay. The goal is to enable regular users to add their desired text in specific areas defined by ...

phpjavascripthtmlsvgraphael

When using v-for to render components and <selection>, is there a way to customize it for just one specific instance of the component?

How can I modify the selection in each instance separately when rendering elements of an array obtained from the backend using v-for? Currently, changing one selection affects all instances due to the v-model. Is there a way to target only one selection ...

javascriptvue.js

Having trouble with the `click()` function not working on a button while using Selenium in

Currently, I am running a selenium test on a remote server in headless mode using the chrome driver. However, when trying to click on a button with the following step, the button does not get clicked. Below is the test step attempting to click the element ...

javascriptseleniumselenium-chromedriverheadless-browser

Update the CSS of a different element when hovering

Hello to all the jQuery developers out there! I have a question that's fairly simple. I'm trying to change a CSS attribute for an element when I hover over a different element on the page. I've created a fiddle for you to review, and I&apos ...

jquerycsshover

Angular2: the setTimeout function is executed just a single time

Currently, I am working on implementing a feature in Angular2 that relies on the use of setTimeout. This is a snippet of my code: public ngAfterViewInit(): void { this.authenticate_loop(); } private authenticate_loop() { setTimeout (() =& ...

javascriptangulartypescriptsettimeout

An error was encountered while attempting to utilize Google's Core Reporting API: Uncaught SyntaxError: Unexpected token <

I've been experimenting with Google's Core Reporting API and successfully implemented their provided demo. Now, I'm trying to integrate the code into my own project. My main tech stack includes AngularJS and PHP. I aim to keep it simple by ...

javascriptgoogle-analytics-api

Javascript involved in the process of CSS Background-Images loading after HTML Images

I quickly put together a microsite that is located at . If your internet connection isn't fast or nothing is cached, you may notice that the background-images used for CSS image-text replacement are the last items to load (especially the h1#head with ...

javascripthtmlcss

Querying MongoDB with a JavaScript file for formatting datetime values

I am utilizing mongodb3.0.5 and my database collection appears as follows: { "_id" : "xxxxxxxxxxxxxxx", "SchoolId" : 1, "ActivationTimestamp" : ISODate("2015-09-22T13:01:58.000Z"), "PersonDetails" : [ { "Name" : "John" ...

javascriptmongodb

The Socket.io client establishes connections with multiple servers simultaneously

Imagine this scenario: I am using nodejs and socket.io, and a question comes to mind. What would happen if one client establishes connections with multiple servers like this: socket = io.connect('http://server1') //600k sockets already connecte ...

javascriptnode.jsserversocket.io

Utilize JSON parsing to extract and store data into an object

I'm currently working on extracting specific objects from a parsed JSON stored within an object named data.json. var data = { json: '', text: '', welcome: '', q1: '', } let foo = await fetch(spr ...

javascriptjsonparsingfetch

The 'mat-table' component is triggering an error indicating that the 'dataSource' attribute is unrecognized in the table

Recently, I have been diving into the world of Material Library for Angular. Working with Angular version 15.0.1 and Material version 15.0.1, I decided to include a mat-table in my form (schedule.allocator.component.html): https://i.stack.imgur.com/c7bsO. ...

javascriptangularmaterial-ui

Find the position of an HTML5 canvas element within a webpage

I am currently facing an issue with a canvas within another canvas. <canvas id ='canvas2' height="718" width="1316"></canvas> The CSS for this canvas is as follows: #canvas2{ position:absolute; width :95%; height:90%; top:5%; lef ...

javascripthtmlcanvas