Get and compare DIV position with scroll - javascript

I need to compare the scroll position with and element position (relative to window top) and when both have the same value, do something (this case console.log("we are the same")).
I've tried the following code, but it's not working. I added an image to explain better.
if ($('.contenedorbusiness figure').length) {
$(document).scroll(function(event) {
var alto_total = $(this).scrollTop();
var loader_business = $('.loader_business').offset().top;
if (alto_total == loader_business.top) {
console.log(alto_total + " == " + parseInt(loader_business));
}
});
}
What I want is:

Change this: alto_total == loader_business.top to this: alto_total == loader_business
.top is what's stored in the variable, so there's no need to do it in the comparison.
DEMO
I took out your initial if statement, so make sure the code inside is running. You will also notice you can't scroll fast. If you scroll past it without pausing, the alert won't trigger.

The following is safer. The == can miss the mark.
$(document).on("scroll", function (event) {
var alto_total = $(this).scrollTop();
var loader_business = $('div').offset();
console.log(alto_total + " == " + loader_business.top);
if (alto_total >= loader_business.top) {
alert('tomalo');
$(document).off("scroll");
}
});
Fiddle

Related

Replace url (window.location) when div height gets bigger than 50px

Newbie here. I'm trying to change the website's page/url using window.location.replace when div #valor height gets bigger than 50px.
Details:
This div #valor increases its height on each click. But when it achieves at least 50px, I need to redirect the user to another page.
I've tried a lot of different approaches but I know that there's something missing on each one. I'll list them below for reference. I do think that the problem is with the way I structure my code...
var maskHeight = $("#valor").css('height');
if (maskHeight > 50){
window.location.replace("https://google.com");
}
else {
alert("if I'm here it means it didn't work"); //just testing
}
});
And I have a lot of different options that didn't work but they all have this if statement:
if ($('#valor').height() > 40) {
window.location.replace("https://google.com");
}
I've also tried something like this:
var div = $("#valor").height();
var win = 50;
if (div > win ) {
window.location.replace("https://google.com");
}
My first approach, not listed here, didn't work because it compared the value right on the first click. And I just want to make something like: when #valor height gets bigger than/achieves 50px > change url.
Thank you in advance! Any help is very much appreciated.
you compare a string with (for example) 10px with an integer:
var maskHeight = $("#valor").css('height'); // output for example 10px
if (maskHeight > 40){ . //than you compare it if(40px > 40)
window.location.replace("https://google.com");
}
change your var to:
var maskHeight = $("#valor").height();
ok you edited your post:
can you show us your click handler function?
I think this is the right way you have do do it:
var maskHeight = $("#valor").height();
$("#valor").on('click', function()
maskHeight = maskHeight + 10;
if (maskHeight > 40){
window.location.replace("https://google.com");
}
else
{
alert("if I'm here it means it didn't work"); //just testing
}
});

Add class to element if y-position bigger as another element

I want to add a class to an element as soon as the users' scroll-position has "hit" a special - other - element.
I try to use that code therefore
var hands = $(".sw_3--breit");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
// The next line is the one I am asking for help
if (scroll >= window.innerHeight)
{
hands.addClass("fixed");
} else {
hands.removeClass("fixed");
}
});
Which works nice by adding the class after the scroll is bigger then the users display-height I guess. But I want to add - and afterwards also remove - a class when then user has "hit" another element.
What I am asking for is something - very roughly and stupid I know - like:
var other_elements_position = $(".other_element"().position;
if (scroll >= other_elements_position)
How can I achieve that? And I already do use jquery for other things, so using jquery there would make sense I guess.
Thanks!
For people that got the same problem as I do have, this worked for me:
var hands = $(".sw_3--breit");
var hands_original = $(".sw_8").position();
var hands_off = $("#target_agentur").position();
var hands_corrected = (hands_original.top + 680) // here I add a small delay to the trigger of the "animation"
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= hands_corrected && scroll <= hands_off.top) // I doublecheck against 2 heights
{
hands.addClass("fixed");
} else {
hands.removeClass("fixed");
}
});

Change z-index after load

I have a function that gets called when a user scrolls to check for scrollTop() and after a certain scroll happens it changes the menu's z-index from -1 to 1. However this only occurs on a scroll so if the user refreshes the site the menu is virtually unusable until the next scroll occurs.
Is there a way for me to call this and check if the amount of screen scrolled (after the refresh not a user scroll) meets the criteria change the z-index?
My JS:
function getPosition(){
var y = $(window).scrollTop();
var status = (y > 880) ? true : false;
//console.log(status);
if(status)
$('#actual-menu').css('z-index', 1);
else
$('#actual-menu').css('z-index', -1);
}
z-index property has no effect on non-positioned elements, the element must be either relatively positioned ,absolutely positioned, or fixed.Replace your line with this:
Try adding this first ,
$("#actual-menu").css('position', 'relative');
$('#actual-menu').css('z-index', 1);
Just run getPosition inside of your ready event.
Functioning Example
var limit = 50;
$(function () {
function getPosition() {
var y = $(window).scrollTop();
var status = (y > limit) ? true : false;
if (status) {
$('#actual-menu').css('zIndex', 1);
} else {
$('#actual-menu').css('zIndex', -1);
}
}
$(document).on('scroll', getPosition);
getPosition();
});

Get and set top position

I am using hammer.js to make a basic touch friendly mobile site. I have hidden the top menu with a negative top position and it will appear using css3 transitions upon a double tap. However I want it to then hide again upon a second double tap.
I have tried using if/else to call the top position then re-set it accordingly but I cant get it to work, anyone know where I am going wrong?
var t = $("#topbar");
var position = t.position();
$sw.on('doubletap', function(event) {
event.preventDefault();
if (position.top == '-55px') {
$('#topbar').css("top", "0");
}
else {
$('#topbar').css("top", "-55px")
}
});
The site address is http://www.bettondesignwork.co.uk/tim/mobile
Thanks
You can try this:
var t = $("#topbar");
var position = t.offset();
$sw.on('doubletap', function(event) {
event.preventDefault();
if (position.top == '-55px') {
$("#topbar").offset({ top: "0"});
}
else {
$('#topbar').offset({ top: "-55px"});
}
}​
The problem could be this line
if (position.top == '-55px')
If i'm not mistaken, the .top property is numeric, so u could change the code to
if (position.top == -55)
Or become more defensive
if (position.top < 0)
Gets top position of one HTMLElement
function getHTMLElementTop(thisNode, Top)
{
if (Top == undefined)
{
var Top = 0;
}
if (thisNode.nodeType == 1)
{
Top += thisNode.offsetTop;
//if (thisNode.parentNode)
if (thisNode.offsetParent)
{
Top = getHTMLElementTop(thisNode.offsetParent, Top);
}
}
return Top;
}
May be it helps

scroll anchor show/hide

was working on a anchor point that triggers a divs visibility. There's no problems if I run it with Jquery 1.3.2 library but when I try with 1.7.1 it's not recognized. any ideas?
$(function() {
var a = function() {
var windowtop = $(window).scrollTop();
var d = $("#anchor").offset({scroll:false}).top;
var c= $("#flyout");
if (windowtop > d) {
c.css({visibility:"visible"});
} else {
if (windowtop <= d) {
c.css({visibility:"hidden"});
}
}
};
$(window).scroll(a);a()
});
});
d seems to always return undefined.
I suspect your code breaks because of the {scroll:false} object your are passing as an argument to offset(). Removing it might solve your problem.
Check the jQuery().offset() API;
jQuery(elem).offset()returns an object containing the element's top and left coordinates. Can be used as jQuery(elem).offset().top;.
jQuery(elem).offset({top:20, left:20}); sets the new top and left coordinates for the element.

Categories