Unverified

Name

Body Class "scroll" on scroll

Language

Javascript

Rating

Voted: 0 by 0 user(s)

Codevault

stark-wp

Scroll down to see more snippets from this codevault.

Wordpress Compatability

The author has indicated that this snippet is compatable up to wordpress version: Not Specified

Code Snippet Plugin Sync

Free & Pro

Download this snippet by clicking the download button, then head over to the Code Snippet Plugin settings in your wordpress admin dashboard, select the import menu then upload this file to import into your wordpress site.

Pro Only (Coming Soon)

You will be able to click a button and sync this snippet to your wordpress site automatically and from your dashboard manage all code snippets across all your wordpress sites that have the Code Snippets Pro plugin installed.

Website/ Profile URL:

julianstark.de

History

Last modified:

29/02/2024

Important Note

This snippet has the following status:

Unverified

This snippet has not been verified, use with caution and at your own risk. See details provided by author in sidebar and click below to find out more.

Body Class "scroll" on scroll

 
                    
1// Check scroll position
2 var bodyElement = document.querySelector('body');
3 
4 var scrollThreshold = 160;
5 
6 // Function to handle scroll and page load events
7 function handleScrollAndLoad() {
8 var scrollPosition = window.scrollY;
9 
10 if (scrollPosition >= scrollThreshold && !bodyElement.classList.contains('scroll')) {
11 bodyElement.classList.add('scroll');
12 } else if (scrollPosition < scrollThreshold && bodyElement.classList.contains('scroll')) {
13 bodyElement.classList.remove('scroll');
14 }
15 }
16 
17 // Add event listener for scroll
18 window.addEventListener('scroll', handleScrollAndLoad);
19 
20 // Add event listener for page load
21 window.addEventListener('DOMContentLoaded', handleScrollAndLoad);
22 
23 
24 
25 
26/*
27 
28var bodyElement = document.querySelector('body');
29var scrollThreshold = 160;
30var autoScrollPosition = scrollThreshold + 2; // New scroll position after adding the class
31var isScrolling = false; // Flag to track if auto-scrolling has occurred
32 
33function toggleScrollClass() {
34 var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
35 
36 if (scrollPosition > scrollThreshold && !isScrolling) {
37 bodyElement.classList.add('scroll');
38 isScrolling = true; // Set the flag to true
39 window.scrollTo(0, autoScrollPosition); // Scroll to the new position
40 //} else if (scrollPosition <= scrollThreshold && isScrolling) {
41 } else if (scrollPosition == 0 && isScrolling) {
42 bodyElement.classList.remove('scroll');
43 isScrolling = false; // Reset the flag
44 }
45}
46 
47window.addEventListener('scroll', toggleScrollClass);
48 
49*/
50 
51 
52 
53 
54 
55 
56 
57 
58// Check if Sticky Nav is stuck
59/*
60var bodyElement = document.querySelector('body');
61 
62window.addEventListener('scroll', function() {
63 var stickyNavigationElement = document.querySelector('#sticky-navigation.is_stuck');
64 
65 if (stickyNavigationElement) {
66 bodyElement.classList.add('scroll');
67 } else {
68 bodyElement.classList.remove('scroll');
69 }
70});
71*/

0

Related Snippets

Please see some snippets below related to this snippet..

General

AI Verified

1

Show Username in Nav

Added: 11 months ago

Last Updated: 7 months ago

Show Username in Navigation

General

AI Verified

0

Access to Gravity Forms

Added: 8 months ago

Last Updated: 1 month ago

<p>This code snippet allows specific WordPress roles to have full access to Gravity Forms within the admin dashboard. By default, this snippet grants this access to the Editor role.</p> <p>If you want...

General

AI Verified

0

Remove Google Fonts

Added: 7 months ago

Last Updated: 7 months ago

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

General

Unverified

0

Body Class "scroll" on scroll

Added: 6 months ago

Last Updated: 4 months ago