We Keep Coding

How to auto scroll (up&down) to section when user scroll (not click!)

I'm trying to achieve a sliding scroll (like fullPage.js) by myself. I don't want to create a plugin either use a plugin. I only want to scroll/slide to a section when user trigger scroll (up and down!).
I've searched all over the internet and I do not know how to prevent the user from scrolling to replace standard scroll behavior by my animated scroll (desktop and mobile). I want to implement this animation inside a Bootstrap carousel item.
Summarizing, I have a carousel with several items, and each item will have a caption (outside the viewport). When the user scrolls down, then I will show the caption (like third slide here), and when the user scrolls up, I will scroll up and hide the caption.
Here is the CodePen with the carousel example running: link
This is what I get so far (I've got part of the code from StackOverflow)...
$(function(){
var _top = $(window).scrollTop();
var _direction;
$(window).scroll(function(){
var _cur_top = $(window).scrollTop();
if(_top < _cur_top)
{
_direction = 'down';
window.scrollTo(0, document.body.scrollHeight);
} else {
_direction = 'up';
window.scrollTo(0, 0);
}
_top = _cur_top;
console.log(_direction);
});
});
I get a very (very!) slow animation... It is not smooth at all.
I've tried this too:
$(document.body).on('DOMMouseScroll mousewheel', function (event) {
event.preventDefault();
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// Scroll up
$("html, body").animate({scrollTop: 0}, 400);
}
else {
// Scroll down
}
});
But, that code does not work and I get this error: [Intervention] Unable to preventDefault inside passive event listener due to the target being treated as passive.
I will be very thankful if you can help me, please!
Edited:
Someone helped me at "StackOverflow en español". Here is the solution!! Many thanks to #matahombres ;)

Hide a div until scrolled to the bottom of the page

I am making a web page (kind of like those music release pages, here is an example), and I would like certain div's at the bottom not to be shown until the user has scrolled to the bottom of the page, delay a second or two, then pop up. Kind of like a hidden feature thing.
You can also think of it like an infinite scroll, like when you drag down your Instagram feed at the top it refreshes it, and new posts show up. That's the user experience I'm looking for, only in my case it is a "finite scroll", just with some div's hidden by default.
I currently have two implementations of it, neither fully achieves the desired experience. Both used jQuery Slim.
In both implementations, #hidden is the id of my hidden-by-default div, it has style="display: none;" inline, on the div tag.
The first one looks like this:
$(window).scroll(function() {
var x = $(document).height() - $(window).height() - 20;
if( $(window).scrollTop() > x ) {
$("#hidden").delay(1000).show(0);
}
else {
$("#hidden").hide(0);
}
});
The problem with this one is that when the div shows up it changes the document height, so when you get to the bottom of the page it kind of flickers (due to recomputing the document height), and sometimes goes back to being hidden. Really bad user experience.
The second one looks like this:
$(window).scroll(function() {
if( $(window).scrollTop() > 75 ) {
$("#hidden").delay(1000).show(0);
}
else {
$("#hidden").hide(0);
}
});
This one got rid of the flickering problem by keeping the threshold static altogether, slightly better user experience, but not really flexible, in the case that my page gets longer I'll have to set a new threshold for the div to show up.
In neither of the above solutions did the delay(1000) work. The div showed up as soon as the page gets scrolled to the bottom.
Is it possible to make this design work out?

You can try this code:
$(window).on("scroll", function() {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
$("#hidden").delay(1000).show(0);
}
});

How to make a div appear and disappear on scroll

I'm currently trying to get a div container to slide in from one side once the user has scrolled down a certain amount of px and disappear after the user has scrolled down another set amount of px.
This page has what I want to do - http://2014.igem.org/Team:CU-Boulder
If anyone can help me, I'd really appreciate it.

To get user's scroll data you can use scrollTop() jQuery method.
Description: Get the current vertical position of the scroll bar for
the first element in the set of matched elements or set the vertical
position of the scroll bar for every matched element.
For example:
$(window).scroll(function() {
var currentHeight = $(window).scrollTop();
if (currentHeight > 200) {
// some action
}
if (currentHeight > 300) {
// another action
}
});
You might be interested looking at this WOW plugin, or at this scrollrevealjs.

Switch tabs based on mouse scroll

I would like to have a widget on a webpage containing a number of tabs. When the user scrolls the page and the widget comes in to view and he keeps scrolling down, the tabs should be activated one by one (without the page scrolling further down). Once the last tab is showing, the page should resume scrolling as usual. Is this doable using JS/jQuery?
UPDATE:
Since this seems too broad a question:
The problem is, I don't know how to use the scroll offset and prevent the page from scrolling down until I decide it can resume its normal behavior
UPDATE 2
I created This fiddle,
$(document).ready(function(){
$('#tabbed').mouseover(function(){
$(this).focus();
}).scroll(function(){
console.log("scrolling tabs");
});
$(window).scroll(function(evt){
var scrollPos = $(this).scrollTop()
console.log(scrollPos);
// BULLETPROOF WAY TO DETECT IF THE MOUSE IS OVER THE
// SCROLLABLE DIV AND GIVE IT FOCUS HERE?
});
});
it contains a long page and a scrollable div among its contents. The only problem is that the div starts catching scroll events only if I move my mouse. If I could find a bulletproof way to activate the scrolling div whenever the mouse is over it I'm there. Any ideas?

You can't prevent scrolling with javascript. Using iframes and divs with scroll will only work if the mouse is over them.
You can cancel the mouse wheel and keys events related to the scrolling, however the user will be able to scroll using the scrollbar (more here).
Another approach is leaving an empty area and fixing your widget inside this area, like in this working example
$(window).bind('scroll', function()
{
var scroll = $(window).scrollTop(),
innerHeight = window.innerHeight || $(window).height(),
fooScroll = $('#fooScroll'),
emptyArea = $('#emptyArea'),
offset = emptyArea.offset(),
fixedClass = 'fixed';
if(scroll > offset.top)
{
if(scroll < offset.top + emptyArea.height() - fooScroll.height())
{
fooScroll.addClass(fixedClass);
fooScroll.css("top", 0);
}
else
{
fooScroll.removeClass(fixedClass);
fooScroll.css("top", emptyArea.height() - fooScroll.height());
}
}
else
{
fooScroll.removeClass(fixedClass);
fooScroll.css("top", 0);
}
});
Then you can change the tabs while the page is scrolling.

You should be able to do this. You can use the jQuery scroll event to run your own code whenever the user scrolls up or down. Also, so long as you call e.preventDefault() whenever the scroll event is fired, you can prevent the whole window from scrolling up or down.

CSS Div Scroll Height

I am trying to recreate the effect seen here: http://jsfiddle.net/surendraVsingh/aATHd/2/
But I am trying to animate the height. For some reason, it works fine when I scroll down, but upon scrolling up, the height doesn't change back to normal. Any ideas?
Here is what I have now: http://justinledelson.com/new/
$(window).scroll(function(){
if ($(this).scrollTop() > 250){
$('#header').animate({"height":"100px"}, 1500);
}
else{
$('#header').animate({"height":"470px"}, 1);
}
});
Thanks!

Although I said that this wasn't a solution for your problem, it seems that it's actually a solution.
Add a class after each action. Something like expanded and collapsed for each situation, and check if that class is present before doing the animation. That way the animations won't trigger until it's necessary.
This avoids triggering the animation multiple times queuing the animation. That's why if you scrolled down a lot of times and scrolled back to top, the "expanding" animation triggered long after you scrolled up (it had to wait that each "collapsing" animation ended)
My test was:
$(window).scroll(function(){
var $header = $('#header');
if ($(this).scrollTop() > 50){ // x should be from where you want this to happen from top//
if (!$header.hasClass('collapsed')) {
$header.animate({"height":"100px"}, 1500, function() {
$header.toggleClass('expanded collapsed');
});
}
}
else{
if (!$header.hasClass('expanded')) {
$header.animate({"height":"470px"}, 1, function() {
$header.toggleClass('expanded collapsed');
});
}
}
});
header should start with expanded class