I am doing the auto-scroll where it will detect the mouse wheel movement up or down and it will continue scrolling on its own but when it reaches the top, the page should jump to the bottom and will continue scrolling to the top and vice versa. but when it reaches the top or bottom it is stuck and glitching.
this is my code for the loop thing
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 1) {
$(window).scrollTop(0)
}
else if ( $(window).scrollTop() == 0 ) {
$(window).scrollTop( $(document).height() );
}
});
and this is for the auto-scroll thing.
var lastScrollTop = 0,
currentpos = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
currentpos = window.pageYOffset + 1
window.scroll(0, currentpos)
} else {
// upscroll code
currentpos = window.pageYOffset - 1
window.scroll(0, currentpos)
}
lastScrollTop = st;
});
I tried doing it on snippet, codepen or jsfiddle but it didn't work.
for reference, I am doing it here http://block-s.net/caps/
Pls log lastScrollTop and currentpos your scroll event.
You will see your problem when it run to the bottom or the top of page that loop up and dow be cause your if condition if (st > lastScrollTop) => not clearly on this case.
Hope that help you.
Related
I am trying to create a scroll effect when the user scrolls up or down.
What I intend to do is scroll by the maximum possible amount(reach top/bottom if screen.height is bigger than what remains)
My code for now intends just simple scrolls but it still doesnt really work. sometimes it doesn't go down or it get's stuck an I can't scroll anywhere. anyone who can help?
$(document).ready(function() {
var lastScrollTop = 0;
var height = Math.max($(document).height(), $(window).height());
$(window).scroll(function(event){
var st = $(window).scrollTop();
if (st > lastScrollTop) {
var d_scroll = Math.min(screen.height, height - $(window).scrollTop() - screen.height);
//alert(d_scroll);
$('html,body').animate({
scrollTop: $(window).scrollTop() + (d_scroll) }, 1000);
} else if(st < lastScrollTop) {
var d_scroll2 = Math.min(screen.height, $(window).scrollTop());
$(window).animate({
scrollTop: $(window).scrollTop() - d_scroll2 }, 1000);
}// else { alert(screen.height + st); alert(height);}
lastScrollTop = $(this).scrollTop();
});
});
Updated this question again:
I have an existing script which works, but the only thing that I would like to have more control on is specifying the tolerance for up/down scroll and when it shows or hides the menu. Currently, the menu slides up at first after scrolling 44px (delta value)--which is OK--but after that, I would like the menu to scroll up or down directly on scroll. When you set the delta value to 0px you can see what i mean, but than it doesn't have the delay at the first scroll (understand it?).
Second thing is that i would like to add a function to the script that will let me control from which width it will start to work. I want it to work from 667px and downwards and not work when it is more than that value (some what like a media query).
JSFiddle
// Hide header on scroll down //
var didScroll;
var lastScrollTop = 0;
var delta = 44;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up');
}
}
lastScrollTop = st;
}
Two questions / two answers:
but after that I would like the menu to scroll up or down directly on scroll
set delta to 0
Also what is the 250 value? Can't seem to see what it does?
250 is the interval of the check if the user scrolled
I'm trying to replicate the scroll event found on http://blkboxlabs.com/, when the user scrolls it animates the screen to the next full height section, depending on if they scroll up or down.
I've got similar functionality, but it is much less smooth, and if the user scrolls enough it will skip 2 sections, as opposed to stopping at the next section.
var didScroll;
var lastScrollTop = 0;
var delta = 5;
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 800);
function hasScrolled() {
var st = $(document).scrollTop();
var winTop = $(window).scrollTop();
var winBottom = winTop + ($(window).height());
// Make sure they scroll more than delta
/*if(Math.abs(lastScrollTop - st) <= delta)
return;*/
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop){
// Scroll Down
$('.fullHeightScrollAssist').each(function(index, element) {
var elTop = $(this).offset().top;
var elBottom = elTop + $(this).outerHeight();
if(elTop > winTop && elTop < winBottom){
$('.fullHeightScrollAssist').removeClass('activeFullScreen');
$(this).addClass('activeFullScreen');
$('html,body').animate({scrollTop: elTop}, 700);
};
});
} else {
// Scroll Up
$('.fullHeightScrollAssist').each(function(index, element) {
var elTop = $(this).offset().top;
var elBottom = elTop + $(this).outerHeight();
if(elBottom > winTop && elTop < winTop){
$('.fullHeightScrollAssist').removeClass('activeFullScreen');
$(this).addClass('activeFullScreen');
$('html,body').animate({scrollTop: elTop}, 700);
};
});
}
lastScrollTop = st;
}
You can see my example at https://jsfiddle.net/raner/vhn3oskt/2/
What I'm trying to accomplish:
1. run the animate scrollTop function immediately on scroll, only once.
2. kill any further scrolling once animation starts, to keep it from skipping the next section.
For anyone else who might like to know, here's a plugin I found that did something close to what I was looking for and was a lot smoother than my initial attempt.
http://www.jqueryscript.net/demo/jQuery-Plugin-For-Smooth-Scroll-Snapping-panelSnap/demos/
So I got a code that works well. I got a full screen slider first on my page.
Right now if I scroll down it animates me past the slider and if I go up it animates me to the top of the page, seeing the slider.
Now I want some resistance when I scroll, like there's a barrier I have to break before it animates down. If I don't break it, it snaps back to its original position.
Any suggestion on what I should do?
var lastScrollTop = 0;
var animationSpeed = 1000;
var scrollReady = 1;
jQuery(window).scroll(function(event){
if (scrollReady == 1) {
var winHeight = jQuery(window).height();
var st = jQuery(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
if (st < winHeight) {
// is at slider scrolling down
// RESISTANCE CODE
if (notBrokenBarrier) {
// Resistance before breaking barrier
// Some thing like this? maybe?
jQuery(this).scrollTop() / 4;
// Some setTimeout for snapping back
} else {
// Broke barrier, scroll down.
jQuery("html, body").animate({ scrollTop: winHeight + "px" }, animationSpeed);
scrollReady = 0;
setTimeout(function(){scrollReady = 1;}, animationSpeed);
}
}
} else if (st < lastScrollTop) {
// upscroll code
if (st < winHeight) {
// scroll up to the slider
jQuery("html, body").animate({ scrollTop: "0px" }, animationSpeed);
scrollReady = 0;
setTimeout(function(){scrollReady = 1;}, (animationSpeed+500));
}
}
lastScrollTop = st;
}
});
EDIT:
Here's a jsbin: http://jsbin.com/lowuqiquji/1/edit?js,console,output
So the animation goes quite good, scrolling past the slider on down, and up to top when you scroll up. I want some resistance in this action, making it a bit harder to execute to scroll past it.
I have a sidebar that scrolls down with the page. However, the sidebar seems to lag behind the scrolling of the page, ex. scroll down and sidebar shows up a few seconds later. Also, the sidebar will keep going down, making the page longer, and causing the footer to become inaccessible. What do I need to do to make the sidebar move with the scroll and for the sidebar to stop moving at the footer? Here is my jQuery code:
$(function() {
var $sidebar = $("aside"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 50;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
An example can be seen at http://meddiary.com/plans-pricing/. Fixing the code is welcomed but just pointing me in the right direction is the best.
Try solving it with pure CSS:
.affix {
position: fixed;
}
Or you can use an existing jQuery plugin like this one:
http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/
This is how I fixed my issue:
if ($(window).width() > 767) {
var $sidebar = $("aside"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 50;
$window.scroll(function() {
if($window.scrollTop() > $('h3').offset().top) {
$sidebar.stop().css('marginTop', '680px');
} else if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
}, 100, function() {
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
};
if ($(window).width() > 767) part keeps the sidebar from scrolling if the viewport is wider than 767px. if($window.scrollTop() > $('h3').offset().top) { $sidebar.stop().css('marginTop', '680px'); } part is for when the top of the viewport hits the desired element, h3, the scrolling stops. That part must be first because the else if statement is always true! Then I just reduced the animation time to stop the lagging.