Develop Reference

Infinite Scroll Effect with javascript

anyone have a clue how to make a sroll effect like this?
http://www.eurekasoft.com
I know the content is repeated at the end to create the illusion but i would like to know how to achieve the seemingly never end scroll.
Thanks!

It appears that site is using Skrollr: http://prinzhorn.github.io/skrollr/
Scroll all the way down for links to the Github and more examples.
Deep down, it is using the function window.scrollTo() to set the scroll position, and probably setting DOM around that area so that it looks the same as where it was scrolled from.
https://github.com/Prinzhorn/skrollr/blob/master/src/skrollr.js#L617

This works for me :)
here is the example: http://www.cancerbero.mx (only enable in Chrome and Safari)
// #loop is the div ID where repetition begins
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
var limit = $('#loop').position().top;
if(scroll >= limit){
window.scrollTo(0,1); // 1 to avoid conflicts
}
if(scroll == 0){
window.scrollTo(0,limit);
}
});
});

Using javascript to pause background scroll to allow for fixed elements to have slide show

Ok so the effect I am trying to emulate can be found on the nexus 5 site - http://www.google.com/nexus/5/ - when you scroll to the phone section. I've viewed source and looked through the code but there is over 13k lines of js so it was a waste.
Anyways what I did was add a class to fix the position of the images and created a background div that was like 5000px so it would appear to be fixed. The js fixed the position after the screen reached a certain point and then removed the fixed class after the end of the div.
My question is that i know this can be done better than my janky 'hack'. I'd love to hear your thoughts on better implementation.
This is part of the code that adds the fixed class
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".container").addClass("fixed");
}
if (scroll >= 8000) {
$(".container").removeClass("fixed");
}
});

Try this guide:
http://blog.teamtreehouse.com/multiplane-design-with-svgs-and-css-3d-transforms
Demo: http://codepen.io/nickpettit/full/eBCrK
Haven't done something like this before myself however. Also just a note that fixed position elements from my experience act up when viewed on tablet/smartphone.

window scroll method flickers in IE

This may come as a huge surprise to some people but I am having an issue with the IE browser when I am using the $(window).scroll method.
My goal:
I would like to have the menu located on the left retain it's position until the scroll reaches > y value. It will then fix itself to the top of the page until the scroll returns to a < y value.
My error:
Everything seems just fine in Chrome and Firefox but when I go to Internet Explorer it would seem the browser is moving #scroller every time the scroll value changes, this is causing a moving/flickering event.
If someone could point me to a resource or give me a workaround for this I would be very grateful!
Here is a fiddle:
http://jsfiddle.net/CampbeII/nLK7j/
Here is a link to the site in dev:
http://squ4reone.com/domains/ottawakaraoke/Squ4reone/responsive/index.php
My script:
$(window).scroll(function () {
var navigation = $(window).scrollTop();
if (navigation > 400) {
$('#scroller').css('top',navigation - 220);
} else {
$('#scroller').css('top',183);
$('#scroller').css('position','relative');
}
});

You might want to take a look at the jQuery Waypoints plugin, it lets you do sticky elements like this and a lot more.
If you want to stick with your current method, like the other answers have indicated you should toggle fixed positioning instead of updating the .top attribute in every scroll event. However, I would also introduce a flag to track whether or not it is currently stuck, this way you are only updating the position and top attributes when it actually make the transition instead of every scroll event. Interacting with the DOM is computationally expensive, this will take a lot of load off of the layout engine and should make things even smoother.
http://jsfiddle.net/WYNcj/6/
$(function () {
var stuck = false,
stickAt = $('#scroller').offset().top;
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
if (!stuck && scrollTop > stickAt) {
$('#scroller').css('top', 0);
$('#scroller').css('position','fixed');
stuck = true;
} else if (stuck && scrollTop < stickAt) {
$('#scroller').css('top', stickAt);
$('#scroller').css('position','absolute');
stuck = false;
}
});
});
Update
Switching the #scroller from relative to fixed removes it from the normal flow of the page, this can have unintended consequences for the layout as it re-flows without the missing block. If you change #scroller to use an absolute position it will be removed from the normal flow and will no longer cause these side-effects. I've updated the above example and the linked jsfiddle to reflect the changes to the JS/CSS.
I also changed the way that stickAt is calculated as well, it uses .offset() to find the exact position of the top of #scoller instead of relying on the CSS top value.

Instead of setting the top distance at each scroll event, please consider only switching between a fixed position and an absolute or relative position.All browsers will appreciate and Especially IE.
So you still listen to scroll but you now keep a state flag out of the scroll handler and simply evaluate if it has to switch between display types.
That is so much more optimized and IE likes it.

I can get flickers in Chrome as well if I scroll very quickly. Instead of updating the top position on scroll, instead used the fixed position for your element once the page has scrolled below the threshold. Take a look at the updated fiddle: http://jsfiddle.net/nLK7j/2/

How to slowly move header while user scrolls the page?

I want to achieve the effect that is used on this Header on this example website:
http://anchorage-theme.pixelunion.net/
You will notice that as you scroll the page, the header slowly moves upward until it disappears from view. I want to achieve this same effect. I believe it will need some JS and CSS positioning but still have no clue how to achieve this. Is this done with parallax scrolling?
Would appreciate if someone could give me a quick example of the code used to do this with a element. So I can then use it on my own site.
Cheers.

the $(window).scroll(function () {...}) is the one you need here
$(document).scrollTop() is the amount of scrolled distance from the top

Use this:
$(window).scroll(function(){
if ($(this).scrollTop() > x){ // x should be from where you want this to happen from top//
//make CSS changes here
}
else{
//back to default styles
}
});

What's the wisest way to detect if a visitor has scrolled to a certain point in a page?

I've looked at this:
http://imakewebthings.com/jquery-waypoints/#about
and would like to incorporate a similar idea into a plugin I have. Waypoints looks intriguing but perhaps more than what I need. I'm also wanting to trigger an alert (or similar) when a certain point on the page is reached.
Truth be told, this is related to Google Analytics and getting more accurate bounce rates. I'll spare you the particulars for now but my presumption is that if the visitor scrolls to certain spot on the page and then leaves before visiting any other page that such single page visit is not a real bounce. That is, they interacted with the page. It wasn't glance and go.
I have a plugin for GA and would like to integrate this idea of scrolling and/or reaching a particular spot on the page to be an event that can be tracked. But I'm casting a new for insight before I jump in and get my hands dirty.
Finally, I'm still pretty new to this so please explain clearly and if possible provide links that would lead to my further education.

You can check if the user has scrolled with the scroll event...
window.addEventListener('scroll', function() {
// Scrolled.
});
jsFiddle.
// jQuery
$(window).scroll(function() {
// Scrolled.
});
jsFiddle.
...and you can tell where they have scrolled with document.body.scrollTop and document.body.scrollLeft.
var body = document.body,
scrollTop = body.scrollTop,
scrollLeft = body.scrollLeft;
jsFiddle.
// jQuery
var body = $('body'),
scrollTop = body.scrollTop(),
scrollLeft = body.scrollLeft();
jsFiddle.