Develop Reference

Consistently tracking scroll with jQuery

Using the following piece of code:
(function($){
$(window).on('scroll', function(){
var scroll_top = $(document).scrollTop();
if (scroll_top > 50 && scroll_top < 100) {
console.log(scroll_top);
}
});
})(jQuery)
Viewing the console shows me a range of numbers between 50 & 100 whilst I scroll up and down, as expected.
However, I need a way to log each number between 50 & 100 as I've scrolled. So that if I stop at 55 it would log 51, 52, 53, 54, 55.
I understand that this is because browsers run javascript and render the page at different speeds but is it at all possible?

var scroll_pos_at_mousedown;
var aa = function(){
$(window).on('scroll mouseup mousedown', function(e){
var scroll_top = $(document).scrollTop();
if(e.type == 'mousedown') {
var scroll_top1 = $(document).scrollTop();
if(scroll_top1 <= 50) {
scroll_pos_at_mousedown = 50;
} else if(scroll_top1 > 50 || scroll_top1 <= 500) {
scroll_pos_at_mousedown = scroll_top1;
} else {
scroll_pos_at_mousedown = 500;
}
console.log("scroll_top is "+scroll_top1);
}
console.log("current_scroll_top is " + scroll_pos_at_mousedown);
if (scroll_top > 50 && scroll_top < 500) {
if(e.type == "mouseup") {
var scroll_pos_at_mouseup = $(document).scrollTop();
console.log('scroll_pos_at_mouseup is '+scroll_pos_at_mouseup);
if(scroll_pos_at_mousedown<=500) {
for(i=scroll_pos_at_mousedown;i<=scroll_pos_at_mouseup;i++)
console.log(i);
}else {
for(i=scroll_pos_at_mouseup;i<=500;i++)
console.log(i);
}
}
}
});
};aa();
I have written this function keeping event mousedown and mouseup in mind. You can add keyup and keydown event as well and add it for up and down arrow keyCode. Hope this helps :)

How to find Multiple div reach top?

I have a survey page divided into sections. As the user scrolls, each section's header sticks to the top of the screen until the next section is reached. I was able to do it for the first and second section but I am not sure how to do it for the third one. There must be a better way to do this.
Here is my code and a jsfiddle
Thank you
var s = $("#block2 .question-title-block");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if ($(this).scrollTop() > 404) {
$('#block1 .question-title-block').addClass("sticky");
if (windowpos >= pos.top) {
$('#block2 .question-title-block').addClass("sticky");
$('#block1 .question-title-block').removeClass("sticky");
}
else{
$('#block2 .question-title-block').removeClass("sticky");
}
}
else{
$('#block1 .question-title-block').removeClass("sticky");
$('#block2 .question-title-block').removeClass("sticky");
}
})

If you want it to be applied to as many elements as you want, don't use them individually, use their class. Here is what you can do:
var titleBlocks = $(".question-title-block");
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
titleBlocks.each(function(){
$(this).toggleClass('sticky', $(this).parent().offset().top <= windowpos);
});
});
JS Fiddle Demo

try this (allows for any number of question blocks):
var containers = $('.question-block-container');
$(window).scroll(function () {
var windowpos = $(window).scrollTop();
containers.each(function () {
var container = $(this),
title = container.find('.question-title'),
contOffsetTop = container.offset().top,
conOffsetBottom = contOffsetTop + container.outerHeight() + 60; // 60 is margin bottom
if (windowpos >= contOffsetTop && windowpos <= conOffsetBottom) {
if (!title.hasClass("sticky")) {
title.addClass("sticky");
}
} else if (title.hasClass("sticky")) {
title.removeClass("sticky");
}
});
});
Example

Trying to turn off requestAnimation function when resizing browser

I have the following code and I am trying to turn off the function when window resize is run, currently it just keeps running on window.resize.
function headerParallax(x) {
if (x ==="true"){
$(window).scroll(function() {
// Store scrollTop in variable
var scrollPos = $(window).scrollTop();
// var viewportHeight = $(window).height();
console.log(scrollPos + 'bgbottle1');
var bouncePos = ((-1 * (scrollPos - 75) * 1.5) + scrollPos).toFixed(2);
var bouncePos1 = ((-1 * (scrollPos - 150) * 1.25) + scrollPos).toFixed(2);
$(".bottle1").css({ 'background-position': "right " + bouncePos + 'px'});
if (scrollPos > 150){
$(".bottle2").css({ 'background-position': "left " + bouncePos1 + 'px'});
}
});
}else if(x === "false"){
alert("no");
}
}
$(window).resize(function(){
if ($(window).width() < 1200){
window.requestAnimationFrame(headerParallax("false"));
}
});
if ($(window).width() > 1200){
window.requestAnimationFrame(headerParallax("true"));
}

You can try something like this:
var _preflag = -1;
var _unbindScroll = function(){};
// it will be fired only once (when flag is changed)
function headerParallax(flag){
if (flag === _preflag){
return;
}
_preflag = flag;
if (flag){
// TODO adjust the UI for true
window.requestAnimationFrame(theCalculatedValue);
_unbindScroll(); // It's duplicate work to unbind scroll here, but there's no harm calling it :)
$(window).on('scroll', _onscroll);
// update the ubind scroll so that anyone can ubind it safely
_unbindScroll = function(){
$(window).off('scroll', _onscroll);
_unbindScroll = function(){};
};
} else {
// TODO adjust the UI for false
window.requestAnimationFrame(theCalculatedValue);
_unbindScroll(); // unbind scrolling, this is what you want, right?
}
function _onscroll(){
// TODO
}
}
function resize(){
// this will be fired multipe times, need to check it in sub functions to take it once
headerParallax($(window).width() < 1200);
}
$(window).resize(resize);
resize();

Force "overscrolling" at Chrome/Mac with javascript

When you get to the limit of document, you can keep scrolling and can see an background behing the document before it bounces back (overscrolling).
How can I force the window to overscroll like this with javascript?

This is not the ultimate solution since I think the animation is imperfect and it's really only for desktops, but it can at least get you started. What I have done is increase the height of the body for animation on scroll.
$(document).on('scroll mousewheel', function (e) {
//Check for mousewheel scrolling down (or not used at all)
if (!e.originalEvent || !e.originalEvent.wheelDeltaY
|| e.originalEvent.wheelDeltaY < 0) {
if ($(window).height() + $(this).scrollTop() == $(this).height()) {
//Prevent simultaneous triggering of the animation
if (!$("body").data('bouncing')) {
$("body").height(function (_, h) { return h + 15; })
.data('bouncing', true);
$("body, html").animate({
'scrollTop': '+=15'
}, 125).animate({
'scrollTop': '-=15'
}, {duration: 125, complete: function () {
$(this).height(function (_, h) { return h - 15; })
.data('bouncing', false);
}});
}
}
}
}).on('keydown', function (e) {
//The "down" arrow; still bounces when pressed at the bottom of the page
if (e.which == '40') {
$(this).trigger('scroll');
}
});

I've been playing with this version that imitates the effect using a div, that slides in and out of view at the bottom of the page. If you have a high res monitor, you may need to increase the height of the main div to test it.
<div id="main" style="background:#f5f5f5;height:1000px"></div>
<div id="overscroll" style="background:#666666;height:120px"></div>
<script type="text/javascript">
var $doc = $(document);
$doc.ready(function () {
var $wnd = $(window),
$oscroll = $('#overscroll'),
block = false;
$wnd.bind('scroll', function () {
if (!block) {
block = true;
var scrollTop = $wnd.scrollTop(),
wndHeight = $wnd.height(),
docHeight = $doc.height();
try {
if (scrollTop + (wndHeight + 120) > docHeight) {
$oscroll.slideUp('slow');
}
else if ($oscroll.css('display') === 'none'
&& (scrollTop + (wndHeight + 120) < docHeight)) {
$oscroll.slideDown();
}
} finally {
block = false;
}
}
});
});
</script>

Improving performance of JavaScript transitions

I have a JavaScript-driven parallax slider, adapted from this tutorial (http://tympanus.net/codrops/2011/01/03/parallax-slider/), and a small script which fades the slider image out after scrolling past a certain point.
Here is the script:
$(document).ready(function() {
$(window).scroll(function () {
var $slider = $('.pxs_slider');
var sTop = $('body').scrollTop();
var sTop_ff = $('html').scrollTop();
var opacity = 1;
if(sTop < 40) {
opacity = 1;
if(sTop_ff < 40) {
opacity = 1;
} else {
opacity = 0;
}
} else {
opacity = 0;
}
$slider.css('opacity', opacity);
});
});
It all works fine, but scrolling becomes significantly sluggish during this transition. However, I've found it only really has this issue in Chrome of all browsers. There is no performance hit in Firefox.
Is there a more efficient approach to this effect I could try?

Cache $('.pxs_slider') so it's not queried every time the scrollbar moves is the big one:
$(document).ready(function() {
var $slider = $('.pxs_slider');
$(window).scroll(function() {
var sTop = $('body').scrollTop();
var sTop_ff = $('html').scrollTop();
var opacity = 1;
if(sTop < 40) {
opacity = 1;
if(sTop_ff < 40) {
opacity = 1;
} else {
opacity = 0;
}
} else {
opacity = 0;
}
$slider.css('opacity', opacity);
});
});
Also, $(window).scrollTop(), I believe, is the correct way:
$(document).ready(function() {
var $slider = $('.pxs_slider');
$(window).scroll(function() {
$slider.css('opacity', $(window).scrollTop() < 40 ? 1 : 0);
});
});