Develop Reference

Javascript, jQuery scrolling

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

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: Smooth width changing on scroll

I have jQuery code that is working:
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos < 10 ) {
$("div").css('width', 75);
} else if(scroll_pos > 25 && scroll_pos < 75) {
$("div").css('width', 100);
} else if(scroll_pos > 75 && scroll_pos < 100){
$("div").css('width', 125);
}else if(scroll_pos > 100){
$("div").css('width', 150);
}
});
});
and a div element with width:75px at start.
With that code when user scroll down dive element is changing width from 75px to 150px in four steps, but I'm looking for something that will change that width from 75px to 150px smoothly without steps, any idea?

Maybe this solution is what you try to get:
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if (scroll_pos > 150) {
scroll_pos = 150;
};
$("div").animate({
width : (75+0.75*scroll_pos)+"px"
});
});
});

You probably are looking for .animate() in jQuery. Just change the size of your div on scroll using animate.
$(document).ready(function(){
$(document).scroll(function() {
$("div").animate({
width : "150px"
});
});
});
For continuous increment of width on scroll try this way. This will increment the width of div on each scroll with 30px and will increase until it reaches 150px.
$(document).ready(function(){
$(document).scroll(function() {
if($("div").width() <= "150"){
$("div").animate({
width : "+=30"
});
}
});
});
jsFiddle
References : .scroll() , .animate()

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