Comments (21)
If you are looking to change the class for the <body>
element, then you can make use of the callback:
$.fn.fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterLoad: function(anchorLink, index){
//using anchorLink
if(anchorLink == 'secondSlide'){
$('body').addClass('secondSlide');
}
}
});
from fullpage.js.
What do you mean with "to body class"?
You can add anchors by just adding them in the anchor
option:
$.fn.fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
});
from fullpage.js.
if section with 'secondPage' anchor is active how to add this anchor to body class? when you scroll to some sections and body class dynamically changes according to anchor..
from fullpage.js.
@Admdh the <body>
element class is not changing at any time.
What exactly you want to accomplish ? I don't understand what you are asking for.
from fullpage.js.
if you'll look at this project you can see how body class is changing https://github.com/peachananr/onepage-scroll
need something like this in your project!
from fullpage.js.
Why is it needed?
You can do it if you need it by using this:
$.fn.fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterLoad: function(anchorLink, index){
$('body').removeClass().addClass(anchorLink);
}
});
from fullpage.js.
Here you have an example working as you want:
http://jsfiddle.net/7PwsS/6/
Check the body classes dubbing.
from fullpage.js.
it's needed for example to change color of header when body class changes or even hide it.. i see it's working but when you load document without anchors body has no class..
from fullpage.js.
There is also a problem with this feature.
What if the user has added his own classes to the body? This method would delete all of them just to add the class corresponding with the section.
I see your point though. (Although this changes of styles could be done with javascript using the callback, which will also work in the case there are no anchors).
You can also deal with the no anchor problem using the index
instead of the anchorLink
:
$.fn.fullpage({
afterLoad: function (anchorLink, index) {
$('body').removeClass().addClass('sectionNumber' + index);
}
});
Living demo: http://jsfiddle.net/7PwsS/7/
from fullpage.js.
ok! if i use this callback for example to alert and add class to header
afterLoad: function(anchorLink, index){
//using index
if(index == '1'){
alert("Section 3 ended loading");
$('#header').addClass('test');
}
//using anchorLink
if(anchorLink == 'secondSlide'){
alert("Section 2 ended loading");
}
}
when user visit site for the first time he won't se alert and no class will be added. he will see it when will scroll back to that index or if will reload page with anchorLink.. example http://jsfiddle.net/7PwsS/10/
from fullpage.js.
Why don't you just add the first class to your body at the HTML markup?
from fullpage.js.
ok, done with that... And is there a way to remove anchor or index? for example user visits site sees index 1 and when he'll move to index 2 or some else the index 1 will be removed so he could never come back to index 1 until reload page..
from fullpage.js.
A way to avoid going back? Nop.
That's a very specific thing for your project and I don't see the place for it in this plugin. Sorry I'm afraid. The plugin is implemented in a way you can navigate through all the page always under any circumstance.
from fullpage.js.
thank you for help! you helped a lot! sorry for disturbing you!
from fullpage.js.
No problem. Your welcome!
from fullpage.js.
using latest jQuery library above jQuery 1.8.3, with
$.fn.fullpage({
afterLoad: function (anchorLink, index) {
$('body').removeClass().addClass('sectionNumber' + index);
}
});
adds the classes all together but doesnt remove them when slide changes and you get
<body class="sectionNumber2 sectionNumber3 sectionNumber4 "
any idea cant use 1.8.3 because other plugins.
from fullpage.js.
afterLoad
is for sections (vertical) not for slides (horizontal).
Use afterSlideLoad
if you want to use it for slides.
from fullpage.js.
got it it was a jQuery version conflict using jquery/1.11.0 and jqueryui/1.10.1 resolved it.
from fullpage.js.
i want to just add simple 1 class to boy because i want to change the header background when scroll is it possible?
from fullpage.js.
@Mikdadali see my video tutorial here regarding how to use fulpage.js's css state classes to trigger css changes:
https://www.youtube.com/watch?v=qiCVPpI9l3M
from fullpage.js.
thank you i have already done that using that classes thanks again
from fullpage.js.
Related Issues (20)
- Feature request: disable URL hashes HOT 1
- Safari desktop inertial scrolling on scrollOverflow sections HOT 6
- Can this be used with react js ? if so could pls provide an example for the same HOT 1
- Issue with FullPage.js on Mobile - Unable to Scroll in Footer HOT 1
- Change Horizontal Slide Direction HOT 3
- Sections jump between each other when scrolling on mobile (responsive slides) HOT 15
- Flexbox and Grid Layouts not working in Webflow HOT 3
- gif not load HOT 5
- Water effect not working HOT 1
- Impossible to modify arrow css on slideLoad javascript HOT 5
- Arrow override is not working (old one still displayed) HOT 2
- Activating scroll anchors breaks the scroll order. HOT 2
- Normal scroll before fullpage HOT 3
- Question: how to deactivate parallax effect on mobile please? HOT 2
- [Vue Router warn]: Couldn't find element using selector "#Section2" returned by scrollBehavior. HOT 6
- water effect demo page doesn't work HOT 1
- Skipping section when moving from "normal scrolling" outside content to fullPage.js HOT 7
- Add/Removed Sections Skipped on Scroll HOT 3
- LazyLoad threshold to load multiple sections and not only the next / prev HOT 3
- Scroll Overflow breaks website layout when using Elementor Flexbox HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fullpage.js.