Home>
I want to create a float header with InterSection ObserverAPI.
"Failed to construct 'IntersectionObserver': The provided double value is non-finite."
Does not work with error.
Non-finite means `` not finite '',
As long as you look at the code, I'm going to lose the finite part ...
Here are the HTML and JS code.
<! DOCTYPE html>
<html>
<head>
<title>float header</title>
<meta charset = "UTF-8" />
</head>
<body>
header
Sample 1
Sample 2
Sample 3
Sample 4
<script src = "src/index.js"></script>
</body>
</html>
import "./styles.css";
const $header = document.querySelector (". header");
// Get header DOM
const options = {
root: null,
rootMargin: 0,
threshold: "300px"
// threshold is the setting value of how much the callback function is called
// watchHeader is executed at 300px intersection
};
const observer = new IntersectionObserver (watchHeader, options);
// Define a function to do when crossing the first argument
observer.observe ($header);
// Observe header with observer
function watchHeader (entry) {
if (entry.isIntersecting) {
entry.target.classList.add ("is-float");
// Give position: fixed;with is-float
}
}
Code
Thanks for your patience.
-
Answer # 1
Related articles
- javascript - i want to implement js that the header comes out softly when scrolling
- i want to implement a filter function using select tag in javascript
- animation that the header disappears from the bottom when it is less than ○○○ px in javascript
- javascript - how to implement client-side rendering using nextjs
- javascript - i want to implement the in-page jump function based on the information read by ajax
- i want to implement an accordion opening/closing function with javascript
- javascript - i want to implement a chat function using action cable
- javascript - i want to implement scroll with slow and fast!
- javascript - i want to implement google recaptcha in react
- javascript - header hidden under owl carousel
- which is better to implement the scroll content that automatically loops in the horizontal direction with css or javascript?
- i want to implement hour with the timer function of javascript
- i want to implement the image slide show function with javascript
- javascript - documentwrite is not recommended, so i intended to implement it as an alternative but it is not displayed
- javascript - jquery: how to implement readmorejs in the tab function
- javascript - sticky header does not apply
- javascript - i want to implement the comment function by asynchronous communication
- javascript - i want to implement exception handling for a specific key when looping an object
- javascript - i'm trying to implement smooth scrolling on a wordpress fixed page
- javascript - i want to get the result and implement the tweet function!
Related questions
- javascript : HTML5 video. blocking when caching video in ios
- javascript : How to output array to HTML table?
- javascript : Getting Input and Value
- javascript : I want to arrange images without HTML and CSS grid
- javascript : How can I change the text inside a div using js?
- I want to get data such as PNG images in binary format with JavaScript
- javascript : How to keep the position of the navigation buttons when pressed?
- javascript : Why, when printing, the canvas is cleared and nothing else appears on it?
- javascript : When inserting a value into the DOM, I get [object HTMLDivElement]
- To limit window resizing with JavaScript
I read Intersection Observer API.
Options given to the second argument are
root: Element used as viewport
margin: Character string used as css margin notation
threshold: Specify when to fire the callback
Shouldn't it be in the form ofIf the value is between 0 and 1, it fires once, and in the case of an array with a decimal value between 0 and 1 as an array element, fires at each timing
?