I am using a fullpage.js plugin and would like to transition the menu from the footer to the header once the user scrolls past the first slide.
On this Page:
However the full screen functionality is not allowing me to check when there is a scroll event.
I have written this:
$(window).scroll(function(){
if ($(window).scrollTop() > $('.topDiv').position().top) {
console.log('div hits top!');
}
});
To check if the top grey div is at the top of the window, but it does not work.
Even:
$(window).scroll(function(){ console.log('scrolling'); });
is not working.
I think the best way to implement the desired feature is to use the callbackd provided by fullPage.js instead of relying to $(window).scroll()
You can have a custom function called on each of this callback:
onLeave: function(index, nextIndex, direction){}
afterLoad: function(anchorLink, index){}
Then you can check the index, and nextIndex value to perform the desired logic.
Hope that helps.
May be this will help
$('elem').bind('DOMMouseScroll', function(e){
if(e.originalEvent.detail > 0) {
console.log('Down');
} else {
console.log('Up');
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$('elem').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
//scroll down
console.log('Down');
} else {
console.log('Up');
}
//prevent page fom scrolling
return false;
});
Related
i'm trying to use this code to get scrolling direction the problem is when scroll up the detection is not going well
$(window).bind('DOMMouseScroll scroll mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
console.log('scroll up');
}else {
console.log('scroll down');
});
});
Here's a screen capture of the result enter image description here it shows scroll up then scroll down but i'm not scrolling down
You have way too many events bound.
Try this code, the only difference is that I use it on a div.
$('div').bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
console.log('scroll up');
}else {
console.log('scroll down');
}
});
Here is a working JS fiddle:
https://jsfiddle.net/r1sjv2tv/
Edit: The above answer works, albeit only when using wheel scroll.
However, the window can also be scrolled with mouse. If you to handle it as well, it will get a bit more complex.
I have made a solution that listens to onscroll event and simply compares the current scrolltop position with the last scrolltop position to determine the direction of a scroll.
$('div').bind('scroll', function(event) {
if ($(this).scrollTop() < $(this).data('last-scroll')) {
console.log('scroll up');
} else {
console.log('scroll down');
}
$(this).data('last-scroll',$(this).scrollTop());
});
This works independent of the original event trigger.
Please see the fiddle:
https://jsfiddle.net/r1sjv2tv/2/
Animation on scroll function is working fine on desktop view but it mess up the scrolling and scroll to random sections when I switch to mobile view and uses touch to scroll the screen. This is my animate on scroll function :
$(window).scroll(function() {
$('.skillbar').each(function(i){
if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
}
});
});
If I use the windows on scroll function, it mess up the mobile view. Please help to solve this issue so that animate on scroll can work on both mobile view with touch scroll and desktop view without messing the scroll.
For more Information these are the other scroll events:
(function($) {
"use strict"; // Start of use strict
// jQuery for page scrolling feature - requires jQuery Easing plugin
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 54)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '#mainNav',
offset: 80
});
// Closes the Responsive Menu on Menu Item Click
$('#navbarResponsive>ul>li>a').click(function() {
$('#navbarResponsive').collapse('hide');
});
// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
} else {
$("#mainNav").removeClass("navbar-shrink");
}
});
})(jQuery); // End of use strict
EDIT
Since this is the same function for both events...
Maybe calling it on the same handler and use an or to trigger only once will do the trick.
$(window).on("touchmove scroll", function(e) {
// Do the function on ONLY ONE of the two event.
if(e.type=="touchmove" || e.type=="scroll"){
$('.skillbar').each(function(i){
if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
jQuery(this).find('.skillbar-bar').not(".triggered").addClass("triggered").animate({
width:jQuery(this).attr('data-percent')
},6000);
}
});
}
});
EDIT
I've added a subtility using a triggered class.
.not(".triggered").addClass("triggered")
One the first iteration of the .each() function, none of the skillbar-bar has the trigered class.
So let's add it! Then trigger the animation.
On the second and all next iterations, the triggered class removes all skillbar-bar which already have the triggered class out of the collection.
This prevent the animate() function to be fired more than once on each skillbar-bar.
I think this was the issue.
Let me know if it works !
Is it possible to add auto-scrolling events before the section scroll to the next portion? Let's say after scrolling to section 2, the user must scroll twice, which will activate two separate animations, before then scrolling to section 3. Should I disable the auto scroll? I have tried to use this
onLeave: function(index, nextIndex, direction){
if(index == 2 && direction =='down'){
function act2s(){
$('.sc1').removeClass('opno').delay(1000).promise().done(function(){
$('.sc2').removeClass('opno').delay(500).promise().done(function(){
$('.vg_act2-inner').addClass('vertical_grid_active');
$('.hg_act2-anti_inner').addClass('horizontal_grid_active');
$('.hg_act2-anti_out-inner').addClass('hg_act2-anti_out-inner_active');
$('.hg_act2-inner').addClass('hg_act2-inner_active').delay(500).promise().done(function(){
$('.red2').addClass('red_active');
});
});
});
}
setTimeout(act2s, 2000);
return false;
}
},
However, some strange reason the animation is stopped just after the first sc1 has the class removed. Is there a way to catch the two scroll events to activate the animation and then returning true again so the section can resume sliding?
Check out the documentation
Cancelling the scroll before it takes place
You can cancel the scroll by returning false on the onLeave callback:
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
//it won't scroll if the destination is the 3rd section
if(nextIndex == 3){
return false;
}
}
});
I am using the following code to show more content when the user scrolls to the bottom of the screen.
$(document).ready(function() {
$('#items').eq(0);
$("#items .itemDiv").slice(12).hide();
var rowCount = $('#items .itemDiv').length;
$(window).scroll(function showMore (e) {
e.preventDefault();
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
$("#items .itemDiv:hidden").slice(0, 12).fadeIn("slow");
if ($("#items .itemDiv:hidden").length == 0) {
if (!('appendEnd' in showMore)) {
showMore.appendEnd = true;
$(".itemscrl").append("<div>You have reached the end.</div>");
}
}
}
});
The problem is that it does not work on some devices (e.g. Android Chrome), so I would like to include the option of allowing the user to click an <a> element to trigger the function.
Any ideas on how to implement this?
I am suspecting that when you call e.preventDefault(); in your code you are breaking the scrollability of a page.
Remove the following from your code, I don't see any reason for disabling the default scrollability of a page:
e.preventDefault();
i'm trying to achieve a Scroll to Top button that fades in at a certain point on the page and fades out at a certain point...I have the fadeIn function working properly but can't seem to get the proper syntax for the click event fadeOut; it just disappears once you get to the top, instead of fading out if you're <= 675px. Any help is greatly appreciated!
HTML:
</div>
BACK TO LOGIN
</div>
jQuery:
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('html, body').animate({
scrollTop : 0
}, 800);
return false;
});
});
I think your question isn't so clear but maybe you mean that when click on the scrollToTop button it doesn't disappear until the scroll reach to top of page, it's because when your animation function is running the .scroll can't runs so fast that disappear button when reach to 675px but you can fadeout button as soon as click on it using this code:
jQuery: $(document).ready(function() {
var isClicked = false;
$('.scrollToTop').css("display","none");
$(window).scroll(function() {
if (isClicked == false){
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
}
});
$('.scrollToTop').click(function() {
isClicked = true;
$('.scrollToTop').fadeOut(500);
$('html, body').animate({
scrollTop : 0
}, 800, function(){
isClicked = false;
});
});
});
The isClicked variable is added to prevent blinking button (you can remove it to figure out what i'm saying).
Also i add this line:
$('.scrollToTop').css("display","none");
because it seems that you don't need a "Scroll To Top" button when page load for first time and you are on the top of page.
Check JSFiddle Demo