Develop Reference

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.

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

Update: Add more control: hide header on scroll and work from a certain width size

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

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.

Jquery follow scroll

I have a sort of sidebar on my website, which has to scroll down together with the user so that it is always in the view.
The code I'm using now is actually working fine however there is one problem. On smaller screens the sidebar scrolls before your at the sidebar thus making it impossible to see it all even if you scroll.
So what I want is the sidebar to scroll with the bottom instead of it being pushed down with the top so that when you reach the end of the sidebar it starts to scroll.
This is the code that I'm currently using.
var documentHeight = 0;
var topPadding = 10;
$(function() {
var offset = $("#mainright").offset();
documentHeight = $(document).height();
$(window).scroll(function() {
var sideBarHeight = $("#mainright").height();
if ($(window).scrollTop() > offset.top) {
var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
var maxPosition = documentHeight - (sideBarHeight);
if (newPosition > maxPosition) {
newPosition = maxPosition;
}
$("#mainright").stop().animate({
marginTop: newPosition
});
} else {
$("#mainright").stop().animate({
marginTop: 0
});
};
});
});

I guess the "best practice" for accomplishing a task like this is to use dynamically changing css position from absolute to fixed and vice versa. A basic example could look like:
$(function(){
var $box = $('.box'),
offset = $box.offset(),
doc_h = $(document).height();
$(window).scroll(function(){
if($(window).scrollTop() > offset.top) {
if(!$box.hasClass('fix'))
$box.toggleClass('normal fix');
}
else{
if(!$box.hasClass('normal'))
$box.toggleClass('normal fix');
}
});
});​
Example in action: http://www.jsfiddle.net/YjC6y/14/

$(function() {
var top = 50;
$(window).scroll(function() {
$('#box').stop().animate({ top: $(window).scrollTop() + top}, 1000);
});
});
Try the example : http://jsbin.com/omiyi3

I think you can instead make the sidebar responsive by throwing your function into one of these:
if (responsive_viewport >= 768) {}
This makes it so that the function will only load if the viewport is bigger than or equal to 768px.