Develop Reference

apply function on all elements with same class

I have a simple function which detects if an element is in the viewport or that it is visible. If that element is visible, on every scroll I move that element down with .css() and change the top property to achieve some parallax effect. This element on which I check is in the viewport and when it moves it is repeated X times on the page. Everything works but only on the first element has this problem, all other elements inherit top position from the first.
Demo: http://codepen.io/riogrande/pen/RRVVwq (scroll down for effect).
EDIT: Some who answered had the wrong idea what I want, so I want the title (element) to move on scroll but only when its in viewport(visible). So when the first element with same class is visible its moving with scroll, then when you scroll below it its not visible anymore it should not move but the other one which is visible should be moving etc etc.
Jquery:
(function($) {
'use strict';
$.prototype.isVisible = function() {
var rect = this[0].getBoundingClientRect();
return (
(rect.height > 0 || rect.width > 0) &&
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
);
};
function doCheck() {
var elementToDetect = $('.text');
var scrolled = $(window).scrollTop();
if (elementToDetect.isVisible()) {
elementToDetect.css('top', (-100 + (scrolled * 0.2)) + 'px');
}
}
$(document).ready(function() {
doCheck();
});
$(window).scroll(function() {
doCheck();
});
})(jQuery);

jQuery applies operations like css() on each element matching the selector.
So if you iterate the jQuery object, you get this:
function doCheck() {
var elementToDetect = $('.text');
var scrolled = $(window).scrollTop();
for (var index = 0; index < elementToDetect.length; index++) {
var element = $(elementToDetect[index]);
if (element.isVisible()) {
element.css('top', (-100 + (scrolled * 0.2)) + 'px');
}
}
}
Which still has a problem, in that all the text maintain the same top relative to their image.
Edit:
Actually, the way I understand what you're doing, you want to let them all move in the same way as you scroll, so each starts above the image when it comes into view. This is closer to what you need:
function doCheck() {
var elementToDetect = $('.text');
for (var index = 0; index < elementToDetect.length; index++) {
var text = elementToDetect[index];
var parent = text.parentElement;
var parentTop = parent.getBoundingClientRect().top;
var scrolled = (window.innerHeight - parentTop);
if (scrolled < 0) {
scrolled = 0;
}
if (parentTop < window.innerHeight) {
$(text).css('top', (-100 + (scrolled * 0.2)) + 'px');
}
}
}
Basically, looking at scrollTop() is wrong, because you really want the position of the parent div to determine the placement of your text.

Here you need to check for each .text on the scroll:
function doCheck() {
var elementToDetect = $('.text');
var scrolled = $(window).scrollTop();
elementToDetect.each(function(i, txtEl) {
if (txtEl.isVisible()) {
txtEl.css('top', (-100 + (scrolled * 0.2)) + 'px');
}
});
}
And most likely you want to have a debouce there in the window.scroll:
var timer;
$(window).scroll(function() {
if(timer){ clearTimeout(timer); }
timer = setTimeout(function(){
doCheck();
}, 900);
});

$('.text') returns an array of elements. You need to apply the css transform to each item rather than the array of items. The below code may require an update to get the output you would like but I think it should get you going.
function doCheck() {
var scrolled = $(window).scrollTop();
$('.text').each(function() {
if($(this).isVisible()) {
$(this).css('top', (-100 + (scrolled * 0.2)) + 'px');
}
})
}

detect a position of an article, and activate the menu with current class

I am making a website in two column, on the left is the menu, on the right is the content.Here is a full preview of the website When you click a link, the content align itself on the right.I search for a way to reverse process :
when you scroll on the right, the article you are reading is detect by jquery and it activate the link on the left. How could I achieve that ?
$('.expander').click(function(e) {
e.preventDefault();
$('.expander ').removeClass('current');
$(this).addClass('current');
var container = $(this).parents('.menu-content').attr('data-id');
$desc = $(this).parents('.titre-soustitre');
console.log("click");
$("#scrollingaside").customScrollbar("scrollByY", $desc.offset().top - ($(window).width() / 100 * 3.6));
$("#scrollingontheright").customScrollbar("scrollByY", $("#" + container).offset().top - ($(window).width() / 100 * 7.2));
console.log("");
});
$('.article').click(function(e) {
var idproj = $(this).find('span:first').attr('id');
$('.menu-content[data-id="' + idproj + '"]').find('.expander').trigger('click');
});
EDIT : A test that doesn't work yet
function checkActiveSection()
{
var fromTop = jQuery(window).scrollTop() ;
var idproj = $(this).find('span:first').attr('id');
jQuery('#scrollingontheright .article').each(function(){
var sectionOffset = jQuery(this).offset() ;
if ( sectionOffset.top <= fromTop )
{
jQuery('.menu-content[data-id="'+idproj + '"]').addClass('current') ;
}
}) ;
}

Scrolling sidebar inside a div with scrollbar - $(window).on('scroll', function()?

I want my social sidebar make scroll only within the gray div. I have already put the sidebar within the gray div does not exceed the footer or the content above. My difficulty is to sidebar scroll accompanying the scroll without going gray div.
http://test.eae.pt/beautyacademy/angebot/
JS:
beautyAcademy.sharer = {
element: void 0,
elementToScroll: void 0,
init:function() {
this.element = $('.js-sharer-ref');
console.log(this.element.length);
if(this.element.length != 1) {
return;
}
this.build();
},
build: function() {
this.binds();
},
binds: function() {
var _this = this;
// Element that's gonna scroll
this.$elementToScroll = $('.fixed-social');
// Element that's gonna scroll height
this.elementToScrollHeight = this.$elementToScroll.outerHeight();
// Element where scroll is gonna happen Height
this.elementHeight = this.element.outerHeight();
// Element where scroll is gonna happen distance to top
this.elementOffsetTop = this.element.offset().top;
// Scroll that was done on the page
this.windowScrollTop = $(window).scrollTop();
this.elementOffsetBottom = this.elementOffsetTop + this.elementHeight - this.elementToScrollHeight;
this.$elementToScroll.css('top', (_this.elementOffsetTop+80) + "px");
$(window).on('scroll', function() {
if(this.windowScrollTop + this.elementToScrollHeight < this.elementHeight )
this.$elementToScroll.css('margin-top', this.windowScrollTop );
});
}
};

You need to try like below :
$(function(){
if ($('#container').length) {
var el = $('#container');
var stickyTop = $('#container').offset().top; // returns number
var stickyHeight = $('#container').height();
$(window).scroll(function(){ // scroll event
var limit = $('#footer').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
el.css({ position: 'fixed', top: 0 });
}
else {
el.css('position','static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({top: diff});
}
});
}
});
DEMO

jQuery absolute sidebr scrolling, stop at the top of parent and at bottom

hi guys so i have this code ive done which when scrolling the sidebar moves up from bottom to top but im stuck with how to stop the scrolling once the sidebar hits the top of the main conatiner - can someone maybe help me with this?
code is:
$(window).bind('scroll', function () {
var scrolledY = $(window).scrollTop();
$('.parallax-sidebar').css('bottom', '+' + ((scrolledY * 1.3)) + 'px');
});
I have a fiddle example here: http://jsfiddle.net/06qwtgt6/1/
Many thanks!

$(document).ready(function () {
/********************************************************************************/
/* Parallax Scrolling */
// Cache the Window object
var $window = $(window);
$('[data-type]').each(function () {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// For each element that has a data-type attribute
$('div[data-type="background"]').each(function () {
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
$(window).bind('scroll', function () {
if (($window.scrollTop() + $window.height()) > (topOffset) &&
((topOffset + $self.height()) > $window.scrollTop())) {
var yPos = -($window.scrollTop() / $self.data('speed'));
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
var coords = '50% ' + yPos + 'px';
$self.css({ backgroundPosition: coords });
};
});
});
// For each element that has a data-type attribute
$('div[data-type="content"]').each(function () {
$(window).bind('scroll', function () {
var scrolledY = $(window).scrollTop();
$('.parallax-content').css('bottom', '+' + ((scrolledY * 1.3)) + 'px');
});
});
$(window).scroll(function(){
if ($(this).scrollTop() > 150) {
$('.sidebar').addClass('fixed');
} else {
$('.sidebar').removeClass('fixed');
}
});
});
CSS
.fixed {position:fixed; top:0;}
DEMO

Jquery not recognize on click function second time

I really need help.
Here's what I'm trying to do: I wanna create 3 div elements which are flying from top to bottom of div (#lang_flying_objects) and when i click "the right one" (by Id), I need to create three more. When I create them I assign them all class "snowflakes".
But I am only able to click on the first group and my onclick function recognize the right id, but when other group is created it won't trigger the onclick function.
PLEASE HELP ME.
Here is the code I'm using:
<script>
function fallingStuff() {
var $snowflakes = $(),
createFallingStuff = function () {
var $snowflake = $('<div class="snowflakes" id="first"></div>');
$snowflake.css({
'left': (Math.random() * ($('#lang_flying_objects').width()/3 - offset)) + 'px',
'top': (-(20 + offset)) + 'px'
});
// add this snowflake to the set of snowflakes
$snowflakes = $snowflakes.add($snowflake);
var $snowflake2 = $('<div class="snowflakes" id="second" ></div>');
$snowflake2.css({
'left': (Math.random() * ($('#lang_flying_objects').width()/3 - offset) + $('#lang_flying_objects').width()/3) + 'px',
'top': (-(20 + offset)) + 'px'
});
// add this snowflake to the set of snowflakes
$snowflakes = $snowflakes.add($snowflake2);
var $snowflake3 = $('<div class="snowflakes" id="third"></div>');
$snowflake3.css({
'left': (Math.random() * ($('#lang_flying_objects').width()/3 - offset) + 2*$('#lang_flying_objects').width()/3) + 'px',
'top': (-(20 + offset)) + 'px'
});
// add this snowflake to the set of snowflakes
$snowflakes = $snowflakes.add($snowflake3);
$('#falling_zone').prepend($snowflakes);
},
runFalling = function() {
$snowflakes.each(function() {
var singleAnimation = function($flake) {
$flake.animate({
top: "500px",
opacity : "0"
}, 10000);
};
singleAnimation($(this));
});
};
createFallingStuff();
runFalling();
}
fallingStuff();
</script>
And here is my onclick function:
<script>
$('.snowflakes').on('click', function() {
var idInputed = $(this).attr('id');
if(idInputed == "first") //for example
{
fallingStuff();
}
});
</script>
Why it won't recognize the onclick function for second group of created divs?

Since the elements are created dynamically, you should use event delegation:
$(document).on('click', '.snowflakes', function() {
var idInputed = $(this).attr('id');
if(idInputed == "first") {
fallingStuff();
}
});