We Keep Coding

Scroll a specific element inside container using JS or jQuery

I have huge sidebar element and when the page is scrolled sidebar point to the current element that is in a viewport. But sometimes active element is out of sidebar visible space i.e below or above borders. And then the user needs to scroll manually to be able to see active element.
I want to try use logic for determining if the active element is out sidebar visible space and auto scroll if needed.
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop();
var container = $('#sectionMenu');
var containerHeight = container.height();
$(data).each(function () {
var topDistance = $(this).offset().top - 250;
var id = $(this).attr('id');
var elem = $('#_' + id);
if ((topDistance) < scrollTop && (topDistance + $(this).height() * 0.95) > scrollTop) {
if (autoScrollFlag) {
if (!elem.hasClass('sideBarActive')) {
var scrollPosition = elem.offset().top - container.offset().top;
removeActiveMenuItems(data);
elem.addClass('sideBarActive');
if (containerHeight < scrollPosition) {
// TODO automated scroll
}
}
}
autoScrollFlag = 1;
}
});
});

The solution that has worked for me was like this.
if (containerHeight < scrollPosition) {
container.animate({
scrollTop: '+=100px'
}, 800);
}

How can I write jquery plugin that works on multiple elements

I wrote following functon and I am trying to use that in different elements but it doesn't work.
$.fn.sticky = function() {
var
scrollTop = $(window).scrollTop();
replace_class = $(this),
sticky = "ceras_sticky_header",
elementOffset = replace_class.offset().top,
distance = (elementOffset - scrollTop),
leftPositionofImage = replace_class.offset().left,
windowWidth = $(window).width(),
elementWidth = replace_class.width(),
rightPosition = (windowWidth - leftPositionofImage - elementWidth - 12);
$(window).scroll(function() {
if( $(this).scrollTop() > distance) {
replace_class.addClass(sticky);
replace_class.css('right',rightPosition);
replace_class.draggable();
} else {
replace_class.removeClass(sticky);
}
});
};
I want to it to work like:
$( ".ancor_controls" ).sticky();
$( ".ancor_controls1" ).sticky();

execute jquery function for each element containing class

The below function mostly works - it moves the backgrounds as I need, however I would like the function to run on any element with a class of "animate", rather than having to call each element down the bottom. I tried $('.animate').load(function(){}; but it just wont work... Thanks
JAVASCRIPT
$(window).load(function(){
(function(){
$.fn.move = function(){
var $this = $(this);
var offset = $this.offset().top;
var start = 0;
var end = offset + $this.height();
var speed = $this.attr("speed");
return this.each(function(){
$(window).bind('scroll', function() {
var windowPos = $(window).scrollTop();
if((windowPos >= start) && (windowPos <= end)) {
var newCoord = windowPos * speed;
$this.css({'background-position': '0 '+ newCoord + 'px'});
};
});
});
};
})(jQuery);
$('.animate').move();
});
HTML
<div class="welcome_6"></div>
<div class="welcome_5"></div>
<div class="welcome_4"></div>
<div class="welcome_3"></div>
<div class="welcome_2 animate" speed="-1"></div>
<div class="welcome_1 animate" speed="0"></div>
EDIT:
When I scroll the page the elements move according to the scroll location. Each element moves at a different speed (set as html attribute). This code moves them all at the same speed.. I'm assuming the $('.animate') should be somewhere up the top replacing the $.fn.move but i cant figure it out..

Should be $('.animate') instead of $('animate') note the dot at the start of the query which says to the jQuery that you are looking for a class.

I think the issue is with the way you are using the immediately invoked function inside the load function and you are passing in jQuery at the bottom and not into the immediately invoke function. This will update the background position as long as you script tag is placed after the jquery script tag
Here is a link to js fiddle:
UPDATE: https://jsfiddle.net/kriscoulson/pnrx34wp/1/
I do not have your exact code for styling so I improvised but if you inspect the elements the background position is being updated;
AND UPDATE :
$.fn.move = function() {
var $this = $(this);
var offset = $this.offset().top;
var start = 0;
var end = offset + $this.height();
return this.each(function(index, element) {
var $element = $(element);
var speed = $element.attr("speed");
$(window).bind('scroll', function() {
var windowPos = $(window).scrollTop();
if ((windowPos >= start) && (windowPos <= end)) {
var newCoord = windowPos * speed;
$element.css({
'background-position': '0 ' + newCoord + 'px'
});
};
});
});
};
$(document).ready(function() {
$('.animate').move();
});
EDIT: Your 'this' binding was off and your speed was declared outside of the this.each

Trigger when scroll stopped by percent

I need to trigger when user stop scrolling and alert some message. But I need to trigger it by percent.
For example I want to alert to user some message if he scroll, but when he stop scrolling and if he scroled more then 80% of window.
I have this code which trigger when srcoll is stopped and don't know how to get this work with scroll percen:
$.fn.scrollStopped = function(callback) {
$(this).scroll(function(){
var self = this, $this = $(self);
if ($this.data('scrollTimeout')) {
clearTimeout($this.data('scrollTimeout'));
}
$this.data('scrollTimeout', setTimeout(callback,250,self));
});
};
jQuery(window).scrollStopped(function(){
alert('stopped');
});

You can calculate the height of document and window, and then compare it with the current vertical position of the scroll bar:
$.fn.scrollStopped = function(callback) {
$(this).scroll(function(){
var self = this, $this = $(self);
if ($this.data('scrollTimeout')) {
clearTimeout($this.data('scrollTimeout'));
}
$this.data('scrollTimeout', setTimeout(callback,250,self));
});
};
jQuery(window).scrollStopped(function(){
console.log(jQuery(window).scrollTop());
if($(window).scrollTop() > ($(document).height() - $(window).height())*0.8){
alert('You have scrolled more than 80%');
}
});
Try it yourself. You probably want to read more details about both functions; .scrollTop() and .height().

DEMO: http://jsfiddle.net/A9dB2/
jQuery(window).scrollStopped(function(){
var docH = $(document).height();
var winH = $(window).height();
var scrollTop = $(this).scrollTop()
var totalPixels = docH - winH;
var scrollPercentage = parseFloat(scrollTop/totalPixels * 100).toFixed(2);
alert(scrollPercentage + "%");
});

making a function works on specific widths

I am trying to make this function works only when the screen size is above 1024px.
//Parallax background image
var velocity = 0.5;
function update(){
var pos = $(window).scrollTop();
$('.parallax').each(function() {
var $element = $(this);
var height = $element.height();
$(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px');
});
};$(window).bind('scroll', update); update();
Here is what I have tried to do:
//Parallax background image
var velocity = 0.5;
$(window).on("ready resize", function() {
if ($(window).width() < 770) {
function update(){
var pos = $(window).scrollTop();
$('.parallax').each(function() {
var $element = $(this);
var height = $element.height();
$(this).css('background-position', '40%' + Math.round((height - pos) * velocity) + 'px');
});
};});$(window).bind('scroll', update); update();
I really don't know what I am doing wrong...

You haven't stated what the problem you're coming across is. If it's "my code doesn't work", then perhaps you should check your syntax first. Your braces are messed up.
//Initialize velocity and empty update function
var velocity = 0.5;
var update = function () {};
//When window is ready (content loaded) OR resized, execute the following function
$(window).on("ready resize", function () {
if ($(window).width() >= 1024) { //Check if window width is 1024px wide or larger
update = function () { //Set update to run this function when executed.
var pos = $(window).scrollTop(); //Get scrollbar position https://api.jquery.com/scrollTop/
//For each element with 'parallax' class, execute the following function
$('.parallax').each(function () {
var $element = $(this); //Get the current parallax-classed element
var height = $element.height(); //Save the current height of this element
//Set the CSS of this parallax-classed element set the background position
$(this).css('background-position', '40% + ' + Math.round((height - pos) * velocity) + 'px');
});
};
} else { //Execute if screen width is < 1024px
update = function () {}; //Set update to do nothing
}
});
//When window is scrolled through, run the update function
$(window).bind('scroll', update);
//update();
Last line is unnecessary, as resize will handle function value, and scroll will handle the execution.
You were missing a + or - within the background-position setting.
So for example, if the result of your Math.round() was "30", then Javascript would interpret that line as $(this).css('background-position', '40%30px'); which obviously would cause issues. I'm sure you wanted it to say something like $(this).css('background-position', '40% + 30px');.