Develop Reference

How to apply .on('load'), .scroll(), and .resize() to a sticky scroller

I have a functionality that sets the top position of a div (#sticky) on load and on scroll. But of course the variables will change as the size of the page changes, so I have need for the .resize() event.
When I run the code on page load and on scroll, it works fine but if I resize the page, then scroll the top position of #sticky gets set to 0.
How do I correct this problem?
$(document).ready(function(){
sticky = $('#sticky'),
stickyPadding = 80;
if($(sticky).length && ($(window).width() >= 900)){
$(sticky).css('position','relative');
$(window).on('load',function(){
getStickyMeasurements();
stickEl()();
$(window).resize(function(){
getStickyMeasurements();
});
$(window).scroll(stickEl());
});
}
});
function getStickyMeasurements(){
elHeight = $(sticky).outerHeight();
initialElToTop = $(sticky).offset().top;
dynamicStickyLimiter = $('.entry-content-extra').length ? $('.entry-content-extra').offset().top : $('footer').offset().top
stickyLimit = dynamicStickyLimiter - initialElToTop;
}
function stickEl(){
return function(){
elTopModifier = $(window).scrollTop() - initialElToTop;
if( stickyLimit <= (elTopModifier + elHeight + stickyPadding)){
stickyTopResult = stickyLimit - elHeight;
}else if($(window).scrollTop() + stickyPadding >= initialElToTop){
stickyTopResult = elTopModifier + stickyPadding;
}else{
stickyTopResult = 0;
}
$(sticky).css('top', stickyTopResult + 'px');
}
}
Also, I know the scope of my variables needs work, so if you include that in part of your answer, that would be helpful as well (but not required of an accepted answer).

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');
}
})
}

Only execute JS if the screen size is more than 1024px?

I have a sidebar that becomes position:fixed when the bottom of the div is visible (followed this tutorial). My problem is I only need the JS to work if the screen size is more than or equal to 1025px.
I know I need something along the lines of if($(window).width() > 1025), but I can't figure out where that needs to be. I'm not great with JS so any help would be appreciated.
Demo
JS
$(function () {
if ($('.leftsidebar').offset()!=null) {
var top = $('.leftsidebar').offset().top - parseFloat($('.leftsidebar').css('margin-top').replace(/auto/, 0));
var height = $('.leftsidebar').height();
var winHeight = $(window).height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 100;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y+winHeight >= top+ height+gap && y+winHeight<=footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',winHeight-height-gap +'px');
}
else if (y+winHeight>footerTop) {
// if so, add the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',footerTop-height-y-gap+'px');
}
else
{
// otherwise remove it
$('.leftsidebar').removeClass('leftsidebarfixed').css('top','315px');
}
});
}
}

This should work:
var flag = false;
// This will keep on checking for window size while you are scrolling.
$(window).on("scroll", function() {
if (flag){
// Do whatever you want here
alert("hey");
}
});
$(window).on("resize", function() {
if ($(window).width() >= 1025){
flag = true;
} else {
flag = false;
}
})

From my comment: Just put that if($(window).width() > 1025) inside the function provided to the scroll event.
e.g.
$(window).scroll(function (event) {
if ($(window).width() > 1024) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y + winHeight >= top + height + gap && y + winHeight <= footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', winHeight - height - gap + 'px');
} else if (y + winHeight > footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', footerTop - height - y - gap + 'px');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/3w5dt/31/
Notes:
not that 1 PX matters, but you did say > 1024px, hence changing 1025 to 1024 :)

First of all you should have a look at the jQuery documentation. The $.browser function was removed in jQuery 1.9. This can end up in serious problems in your code.
Just add something like the follwing code in the first if condition:
if (!msie6 && $('.leftsidebar').offset()!=null && $(window).width() > 1025 ) {
...
}
That should be all. If you want, that javascript should react on window resize just add something like the following
$(window).on('resize', function( event ) { /* code here */ }).trigger('resize');

if(screen.width >= 1024)
{
$(window).scroll(function (event) {
//Write your function code here
});
}
I hope it will help you.

Adding Media Queries to Javascript

I've got a sticky sidebar going on with this code. But I only want it to affect the .fake-sidebar div when at 768px or below. Could anyone explain how to add media queries to my javascript?
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('.fake-sidebar').offset();
sticky_offset = original_position_offset.top;
$('.fake-sidebar').css('position', 'fixed');
});
$(window).scroll(function () {
var sticky_height = $('.fake-sidebar').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll + window_height) > sticky_offset) {
$('.fake-sidebar').css('position', 'relative');
}
if((where_scroll + window_height) < (sticky_offset + sticky_height)) {
$('.fake-sidebar').css('position', 'fixed');
}
});
Any help is appreciated. Thanks in advance!

You can add the event on window resize, or on document ready, depending of what you want:
$(window).resize(function() {
var width = $(window).width();
if (width < 768) {
$('.fake-sidebar').css('position', 'relative');
}
else {
$('.fake-sidebar').css('position', 'fixed');
}
});

javascript check document for element to apply a value

i'm pretty new to javascript and have been stuck on this all day. I have a script which resize element according to screen res it all works except I need to have "if element DOES NOT exist on document then add an addittional value "242px" into contentContainer.css method" this is what I have so far so that this eleemnt takes up the space of the asideContent element when its not on the page...
<script>
// DOM Container Resize Handler
var extra = ($("body.asideContent").length == 0) ? 242 : 0;
var adjustStyle = function() {
var winWidth = $(window).width(),
width = parseInt(winWidth),
container = $('body .fixed');
contentContainer = $('body .content');
if (width >= 1454) {
container.css('width','1454px');
contentContainer.css('width',extra + 1210 + "px");
} else if ((width < 1454) & (width >= 1212)) {
container.css('width','1212px');
contentContainer.css('width',extra + 968 + "px");
} else {
container.css('width','970px');
contentContainer.css('width',extra + 726 + "px");
}
};
$(function() {
var filterWrap = $("#filterWrap"),
offset = filterWrap.offset(),
topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
filterWrap.stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
filterWrap.stop().animate({
marginTop: 0
});
};
});
// DOM Container Resize Handler - Initialization
$(window).resize(function() {
adjustStyle();
});
adjustStyle();
});
</script>
Its applying the extra all the time, add I only want to apply this when ("body.asideContent") is not in the document
test html
<html>
<head>
</head>
<body>
<div class="fixed">
<div id="container">
<div class="asideContent">&nbsp</div>
<div class="content">&nbsp</div>
</div>
</div>
</body>
</html>
Just want to say thank you in advance for any help you can give me... its been driving me crazy all day...

body.asideContent means a body with a class of asideContent. Try
$("body .asideContent")
(aka, with a space between body and .asideContent)