We Keep Coding

jQuery problems with offset()

I ran into a problem when creating a scroll for headlines.
I looked at the element code, the code swears at the element "..offset().top"
$(function() {
var header = $("header"),
introH = $("#intro").innerHeight(),
scrollOffset = $(window).scrollTop()
// scroll
checkScroll(scrollOffset)
$(window).on("scroll", function() {
scrollOffset = $(this).scrollTop()
checkScroll(scrollOffset)
})
function checkScroll() {
if (scrollOffset >= introH) {
header.addClass("fixed")
} else {
header.removeClass("fixed")
}
}
// scroll keys
$("[data-scroll]").on("click", function(event) {
event.preventDefault();
var
blockId = $(this).data("scroll"),
blockOffset = $(blockId).offset().top /* This line */
$("html, body").animate({
scrollTop: blockOffset
}, 500)
})
})
enter image description here

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 to select non-parent elements by class and id with JQuery?

I need to select element by id and class with JQuery function. Problem is that elements are not parents. Smth like this:
<div class="image"></div>
<div id="contact"></div>
My code is working but this isn't a solution.
$(document).ready(function() {
$(window).scroll(function() {
$('.featurette-image').each(function() {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ) {
$(this).animate({'opacity':'1'}, 700);
}
});
$("#contactme").each(function() {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ) {
$(this).animate({'opacity':'1'}, 500);
}
});
});
});
Thanks in advance.

You can join jquery selectors using commas , like so:
$("#contactme, .featurette-image").each(...
This behavior is described in their documentation here: https://api.jquery.com/multiple-selector/

Maybe this :
$("#contactme, .featurette-image").each(function() {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ) {
$(this).animate({'opacity':'1'}, 700);
}
});
or
$(document).ready(function() {
$(window).scroll(function() {
$('body div').each(function() {
if ($(this).hasClass('featurette-image') || $(this).attr('id') == 'contact') {
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ) {
$(this).animate({'opacity':'1'}, 700);
}
}
});
});
});

Javascript FadeIn code add more classes

Im new in Javascript, Im sorry for the armature questions
i have a fadein code only for one class that works perfect, here is the code:
jQuery(document).ready(function($) {
var fadeinbig = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.fadeinbig').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('fadeinbig')) {
$(this).removeClass('fadeinbig');
}
});
}
fadeinbig();
$(window).on('scroll resize', fadeinbig);
I would like to add some more classes like, fadeinleft, fadeinright, etc.
like this:
jQuery(document).ready(function($) {
var fadeinbig = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.fadeinbig').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('fadeinbig')) {
$(this).removeClass('fadeinbig');
}
});
}
fadeinbig();
$(window).on('scroll resize', fadeinbig);
});
jQuery(document).ready(function($) {
var faidinbottom = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.faidinbottom').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('faidinbottom')) {
$(this).removeClass('faidinbottom');
}
});
}
faidinbottom();
$(window).on('scroll resize', faidinbottom);
});
jQuery(document).ready(function($) {
var faidintop = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.faidintop').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('faidintop')) {
$(this).removeClass('faidintop');
}
});
}
faidintop();
$(window).on('scroll resize', faidintop);
If you ask me why my code is with removeClass, not with addClass, it is becouse it is easer for me to manipulate whit my content, without changing the base css styles of my website. I just add some classes "faidintop, faidinbottom etc." to the style sheet, then to the class of a div, and the magic happens.
I will be very grateful if some one could help me whit this, or at least give me some directions, how to do it the right way.

Run function when screen under 1024px

I want to run the following function when screen width is equal or above 1024px
//Fade elements on Scroll
var divs = $('.fader');
$(window).on('scroll', function() {
var st = $(this).scrollTop();
divs.css({ 'opacity' : (1 - st/300) });
});
I tried to add if($(window).width() >= 1024){
So its now looks like this:
var divs = $('.fader');
if($(window).width() >= 1024){
$(window).on('scroll', function() {
var st = $(this).scrollTop();
divs.css({ 'opacity' : (1 - st/300) });
});
}
But it did not work, what I am doing wrong?

I am not sure but you can try. I think You have use resize event
$(window).on('resize', function () {
var divs = $('.fader');
if ($(window).width() >= 1024) {
$(window).on('scroll', function () {
var st = $(this).scrollTop();
divs.css({
'opacity': (1 - st / 300)
});
});
} else {
$(window).off('scroll');
}
}).trigger('resize');