We Keep Coding

Divs don't stop following scroll at footer

I tried a lot of solutions but I cant make the divs stop following the scroll at the footer.
Here is my code to make the divs follow the scroll (colderecha and colizquierda are my divs that follow the scroll):
$(document).ready(function () {
var top = $('#colizquierda').offset().top - parseFloat($('#colizquierda').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
//if y > top, it means that if we scroll down any more, parts of our element will be outside the viewport
//so we move the element down so that it remains in view.
if (y >= top) {
var difference = y - top;
$('#colizquierda').css("top",difference);
}
});
});
$(document).ready(function () {
var top = $('#colderecha').offset().top - parseFloat($('#colderecha').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
//if y > top, it means that if we scroll down any more, parts of our element will be outside the viewport
//so we move the element down so that it remains in view.
if (y >= top) {
var difference = y - top;
$('#colderecha').css("top",difference);
}
});
});
What I have tried:
$(document).scroll(function() {
checkOffset();
});
function checkOffset() {
if ($('#colizquierda').offset().top + $('#colizquierda').height() >= $('#footer').offset().top - 10)
$('#colizquierda').css('position', 'absolute');
if ($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
$('#colizquierda').css('position', 'fixed');
if ($('#colderecha').offset().top + $('#colderecha').height() >= $('#footer').offset().top - 10)
$('#colderecha').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
$('#colderecha').css('position', 'fixed');
}

Class scroll when scroll direction and scroll percent is true (jQuery)

I am fairly new to jQuery and JavaScript and need some help!
I am trying to make a header disappear when the user scrolls down a certain percent of the document. Also I want the header to reappear when the user scrolls up a certain percent but I just get this error in the JavaScript console: Uncaught SyntaxError: Unexpected token &
$(function(){
var lastScrollTop = 0,
delta = 5;
$(window).scroll(function(event) {
var scrollTop = $(this).scrollTop(),
scrollAmount = $(window).scrollTop(),
documentHeight = $(document).height(),
scrollPercent = (scrollAmount / documentHeight) * 100;
if(Math.abs(lastScrollTop - scrollTop) <= delta)
return;
if (scrollTop > lastScrollTop && scrollPercent > 15){
&('.heady').slideUp(1000);
} else if (scrollTop < lastScrollTop && scrollPercent > 30){
&('.heady').slideDown(800);
}
lastScrollTop = scrollTop;
});
});
If anyone could help me I would be very grateful!

You try to use & instead of $.
jQuery can be used in two ways:
var way1 = jQuery('.classSelector');
var way2 = $('.classSelector');
Think about changing your code to this:
if (scrollTop > lastScrollTop && scrollPercent > 15){
$('.heady').slideUp(1000);
} else if (scrollTop < lastScrollTop && scrollPercent > 30){
$('.heady').slideDown(800);
}

.scrollTop() may help you....
The following Link will show a working example.

Make HTML5 draggable items scroll the page?

I'm using the HTML5 attribute draggable = "true" on some of my divs on my webpage. I want it so that when you drag one of these items to the bottom of the page, it scrolls the page down and when you drag it to the top, it scrolls the page up.
I will eventually make a playlist on my sidebar, and since it will not always be on view depending on where you're looking on the page, the page needs to scroll when you're dragging.
My page is here and you can try dragging the pictures of the posts around. On Chrome, it automatically lets me scroll down when I drag to the bottom, but not up. On Firefox, it doesn't automatically let me scroll either direction. Any help?
Here's a simple jsfiddle to get you started. On Chrome you should be able to drag the Google icon down and have it scroll the page down, but not going up.

here is a code that will scroll-up or scroll-down your page while you are dragging something. Just placing your dragging object at top or bottom of the page. :)
var stop = true;
$(".draggable").on("drag", function (e) {
stop = true;
if (e.originalEvent.clientY < 150) {
stop = false;
scroll(-1)
}
if (e.originalEvent.clientY > ($(window).height() - 150)) {
stop = false;
scroll(1)
}
});
$(".draggable").on("dragend", function (e) {
stop = true;
});
var scroll = function (step) {
var scrollY = $(window).scrollTop();
$(window).scrollTop(scrollY + step);
if (!stop) {
setTimeout(function () { scroll(step) }, 20);
}
}

I have made a simple JavaScript drag and drop class. It can automatically scroll up or down the page while dragging.
See this jsfiddle. Also avaliable at my github page.
Dragging at a high speed is not recommended now. I need to work out that.
Code below is a part of the library.
var autoscroll = function (offset, poffset, parentNode) {
var xb = 0;
var yb = 0;
if (poffset.isBody == true) {
var scrollLeft = poffset.scrollLeft;
var scrollTop = poffset.scrollTop;
var scrollbarwidth = (document.documentElement.clientWidth - document.body.offsetWidth); //All
var scrollspeed = (offset.right + xb) - (poffset.right + scrollbarwidth);
if (scrollspeed > 0) {
this.scrollLeft(parentNode, scrollLeft + scrollspeed);
}
scrollspeed = offset.left - (xb);
if (scrollspeed < 0) {
this.scrollLeft(parentNode, scrollLeft + scrollspeed);
}
scrollspeed = (offset.bottom + yb) - (poffset.bottom);
if (scrollspeed > 0) {
this.scrollTop(parentNode, scrollTop + scrollspeed);
}
scrollspeed = offset.top - (yb);
if (scrollspeed < 0) {
this.scrollTop(parentNode, scrollTop + scrollspeed);
}
} else {
var scrollLeft = offset.scrollLeft;
var scrollTop = offset.scrollTop;
var scrollbarwidth = parentNode.offsetWidth - parentNode.clientWidth; //17
var scrollbarheight = parentNode.offsetHeight - parentNode.clientHeight; //17
var scrollspeed = (offset.right + xb) - (poffset.right - scrollbarwidth);
if (scrollspeed > 0) {
this.scrollLeft(parentNode, scrollLeft + scrollspeed);
}
scrollspeed = offset.left - (xb + poffset.left);
if (scrollspeed < 0) {
this.scrollLeft(parentNode, scrollLeft + scrollspeed);
}
scrollspeed = (offset.bottom + scrollbarheight + yb) - (poffset.bottom);
if (scrollspeed > 0) {
this.scrollTop(parentNode, scrollTop + scrollspeed);
}
scrollspeed = offset.top - (yb + poffset.top);
if (scrollspeed < 0) {
this.scrollTop(parentNode, scrollTop + scrollspeed);
}
}
};

Here is the javascript version of AngularPlayers answer, I added horizontal support. I noticed both the JQuery solution and Javascript solution have a bug on mobile safari that allows the page to infinitely grow when the bounce effect from overscrolling happens.
The purpose of VerticalMaxed and HorizontalMaxed is to check that the scroll bars are not maxed before scrolling again. This prevents the page from growing during overscroll bounce.
var stopX = true;
var stopY = true;
document.addEventListener('drag', function(e) {
if (event.target.classList.contains('draggable')) {
stopY = true;
// Handle Y
if (e.clientY < 150) {
stopY = false;
scroll(0,-1)
}
if ((e.clientY > ( document.documentElement.clientHeight - 150)) && !VerticalMaxed()) {
stopY = false;
scroll(0,1)
}
// Handle X
stopX = true;
if (e.clientX < 150) {
stopX = false;
scroll(-1,0)
}
if ((e.clientX > ( document.documentElement.clientWidth - 150)) && !HorizontalMaxed()) {
stopX = false;
scroll(1,0)
}
}
});
document.addEventListener('dragend', function(e) {
if (event.target.classList.contains('draggable')) {
stopY = true;
//stopY = true;
stopX = true;
}
});
// On drag scroll, prevents page from growing with mobile safari rubber-band effect
var VerticalMaxed = function(){ return (window.innerHeight + window.scrollY) >= document.body.offsetHeight}
var HorizontalMaxed = function(){ return (window.pageXOffset) > (document.body.scrollWidth - document.body.clientWidth);}
var scroll = function (stepX, stepY) {
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
window.scrollTo((scrollX + stepX), (scrollY + stepY));
if (!stopY || !stopX) {
setTimeout(function () { scroll(stepX, stepY) }, 20);
}
}

How detect actual position before start change screen orientation?

I'm trying to detect the actual position of my page scrool before start the change orientation.
It will determine what position of my "new" screen (in the new orientation) will be show.
I tried to check, every scroll event, the actual position, as you can see below:
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= window.secao1 && scrollTop <= window.secao1){
window.secaoIDSet = "s1";
}
if (scrollTop >= window.secao2 && scrollTop <= window.secao2){
window.secaoIDSet = "s2";
}
if (scrollTop >= window.secao3 && scrollTop <= window.secao3){
window.secaoIDSet = "s3";
}
if (scrollTop >= window.secao4 && scrollTop <= window.secao4){
window.secaoIDSet = "s4";
}
if (scrollTop >= window.secao5-2){
window.secaoIDSet = "s5";
}
});
And then I would like to set the position to be show in the new orientation, but I don't know when do this action:
$(window).scrollTop($('#' + window.secaoIDSet).offset().top + 'px');

First create even handler
$(window).on("mousewheel", function() {
alert($(document).scrollTop());
}
Then just call
$(window).mousewheel();
Hope it will help.

Change scroll direction at Anchor point

on my site I have 6 divs each div the same height and width of the browser window, so 5 are out of view, 3 left aligned then 3 more on top, as so....
When my visitors scroll, id like to scroll along to the 3rd div, then scroll up to the 4th, then continue scrolling horizontally. Is this possible with jQuery, and if so how can it be done?

Check this out. It allows you to scroll in different directions and set up "slides" like above
http://joelb.me/scrollpath/

Simple (maybe helpful) and not perfect:
var win = $(window),
doc = $(document),
bodyH = doc.height() - win.height(),
page4 = $('#page4');
win.scrollTop(bodyH);
$(document).on('DOMMouseScroll mousewheel', function(e, delta) {
delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 120;
if(delta < 0) {
if(win.scrollLeft() > page4.offset().left && win.scrollTop() !== 0) {
win.scrollTop(win.scrollTop() + delta * 30);
} else {
win.scrollLeft(win.scrollLeft() - delta * 30);
}
} else {
if(win.scrollLeft() < page4.offset().left && (win.scrollTop() > 0 || win.scrollTop() === 0) && win.scrollTop() !== bodyH) {
win.scrollTop(win.scrollTop() + delta * 30);
} else {
win.scrollLeft(win.scrollLeft() - delta * 30);
}
}
e.preventDefault();
});
demo