Javascript, jQuery scrolling - javascript

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();
});
});

Related

Glitch when page is looping when scrolling with auto-scroll

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.

animate scroll to specific page position on scroll

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/

jQuery resistance on page scroll

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.

Footer animates up when you reach bottom of screen, but fails to animate down when you scroll back up

I have a footer that animates up when the user scrolls to the very bottom of the page. Right now it is currently staying in the post-animation state after animation completes. However, I'm trying to get it to animate back down once the user scrolls back up the page a little bit.
Here's my code so far. This correctly animates the footer up, but not back down:
$(window).scroll(function() {
var i;
i = 0;
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
i = 1;
$("footer").animate({
marginBottom: "-22px"
}, 500);
}
else if (i > 0 && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
$("footer").animate({
marginBottom: "-156px"
}, 500);
i = 0;
}
});
You're resetting your "flag" variable, i on every scroll.
Here's a fiddle demonstrating a workaround (and what I mentioned in the comments): http://jsfiddle.net/px8y9/
var isShowing = false;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
alert("Show Footer");
isShowing = true;
} else if (isShowing === true && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
alert("Hide Footer");
isShowing = false;
}
});

How to stop a fixed sidebar from going in the footer?

I'm building a website. http://check.topicwine.com
Have a look to see my work.
I want to make a static sidebar. I'm using the code:
$(function() {
var offset = $("#ad-wrapper").offset();
var topPadding = 60;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#ad-wrapper").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#ad-wrapper").stop().animate({
marginTop: 0
});
};
});
});
The sidebar comes along, but it also goes where it shouldn't. I mean, it enters the footer as well. Rather, it overlaps the footer.
I want it to stop next to the grid.
Thanks, in advance. :)
Add overflow:hidden to div#content. This way we will get the proper height of the content div.
Now $('#content').height() + $('#content').offset().top is the maximum distance the sidebar should move. Which means, the sidebar's offset.top + height should not go more than this.
Add this check in your scroll handler
Set a limit for the top margin, since the sidebar can't go past the $('#main') element.
$(function() {
var offset = $("#ad-wrapper").offset();
var topPadding = 60;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop(); // Store this for convenience
if (scrollTop > offset.top) {
var newMarginTop = scrollTop - offset.top + topPadding;
// The sidebar can only go so far!
var marginLimit = $('#main').height() + $('#main').offset().top - offset.top - $("#ad-wrapper").height();
if (newMarginTop > marginLimit)
newMarginTop = marginLimit;
$("#ad-wrapper").stop().animate({
marginTop: newMarginTop
});
} else {
$("#ad-wrapper").stop().animate({
marginTop: 0
});
}
});
});

Categories

Resources