I'm trying to calculate the distance between a website footer and a sidebar (which has a variable margin-top property as it's mimicking a fixed position element.)
In smaller resolutions, the sidebar will scroll on top of the footer. To solve this, I want to hide the sidebar when it's X px from the footer and then show it again once it's scrolled X px above the footer.
I've tried the below code (which is inside a window scroll function) but this is returning a negative number & isn't working as expected.
distance = sidebar.offset().top - footer.offset().top;
console.log(distance);
if ( distance > -500) {
sidebar.fadeOut('fast');
} else {
sidebar.fadeIn('fast');
}
Try this.
$(window).scroll(function() {
//changed order, now you won't get negative number
distance = (footer.offset().top - footer.outerHeight() ) - sidebar.offset().top;
if( distance <= 50 ) // 50 or any distance you want
sidebar.fadeOut(500);
else
sidebar.fadeIn(500);
});
Added that part inside $(window).scroll() so that it'll be checked every time you scroll.
Related
This question has been asked here many times but I am looking to do this differently using Vanilla Javascript and not jQuery.
I need to reduce the logo size based on the scroll position but not suddenly. Adding a class to reduce the logo size is understood but I am looking to have the logo grow/shrink based on the exact scroll position.
The logo needs to stop at 200px wide down from 300px wide on scroll down.
When the user scrolls back up to a certain point the logo begins to increase back to 300px but still based on scroll position and not instantly based on a point.
Something similar to this on Codepen:
https://codepen.io/jonathanphz/pen/NAXRKG
var expandDiv = document.getElementById("expand");
var speed = 5;
function expanding() {
var scrolltop = window.pageYOffset; // get number of pixels document has scrolled vertically
var scrollAndSpeed = (scrolltop / speed);
//Expand using transform
//expandDiv.style.transform = "scalex( " + Math.min(Math.max(scrollAndSpeed, 1), 10) + ")";
//Or using width
expandDiv.style.width = Math.min(Math.max(scrollAndSpeed, 20), 95) + "%";
}
window.addEventListener('scroll', function() { // on page scroll
requestAnimationFrame(expanding); // call parallaxing()
}, false);```
You can use window.onscroll in vanilla JavaScript.
add condition with document.body.scrollTop and compare it, then change the styling(width and height) accordingly.
It will help you.
I want to detect the total distance the user scrolled on a website. Therefore I want to add up the scroll distance downwards as well as the scroll distance upwards.
So for example: the user scrolls 150px downwards and scroll back to the top of the page the result should be 300px.
With window.pageYOffset I can detect the distance downwards. How can I add both directions up?
// edit:
You need a counter – totalOffset. You need to check current scroll position – currOffset. You need a function that fires on scroll and calculates the distance between current and cached position and that updates the counter and the cached position.
let totalOffset = 0;
let currOffset = window.pageYOffset;
window.addEventListener(
"scroll",
() => {
let addedOffset = Math.abs(currOffset - window.pageYOffset);
totalOffset += addedOffset;
currOffset = window.pageYOffset;
console.log('the total scroll in px is: ', totalOffset);
},
false
);
<div style="min-height:2000px">
<div>
It might not work ideally in SO snippet runner, but it seems to work fine in a browser.
I have an html layout where there is a left well of content, and in the right well, an image or some other block of content. At some point as the user scrolls and that block of content in the right well gets to the top of the screen, it's position gets changed to fixed. As it hits the bottom of it's parent element, it's position changes to absolute and scrolls off the screen with its parent element.
I have this set up currently here: http://jsfiddle.net/jdhancock88/6hLJF/, where my javascript/jquery is:
$(document).ready(function() {
var offset = $('.rightWellContainer').offset(); /*gets top and left position of the div containing the image*/
$(window).scroll(function() {
var scrollTop = $(window).scrollTop() +20; /*sets variable for the top of the window scroll, plus 20 (for the items's padding) */
var specialHeight = $('.special .leftWell').height(); /*gets the height of the row containing the element */
var imageHeight = $('.imageContainer img').height(); /*gets the height of the element */
var mark = (offset.top +specialHeight - imageHeight); /*sets the mark at which the element should top scrolling and switch to position absolute by adding the element's start position (offset.top), to the row's height (specialHeight), minus the height of the object (right4Height)*/
/* when the top of the object is less than the top of the window's scroll AND the object hasn't reached the bottom of the row (mark > scrollTop), add fixed class to freeze object in scroll */
if (offset.top < scrollTop && mark > scrollTop) {
$('.rightWellContainer').addClass('fixed');
$('.rightWellContainer').css('top', 20);
}
/*remove the fixed class when the object should scroll with it's row */
else {
$('.rightWellContainer').removeClass('fixed');
$('.rightWellContainer').css('top', 0);
}
/*if the top of the object hits the point (mark) where it's at the end of it's row as it scrolls off the window, add position absolute so the object scrolls up with the bottom of its row */
if (scrollTop >= mark) {
console.log("You hit the mark");
$('.rightWellContainer').addClass('bottom');
$('.rightWellContainer').css('top', specialHeight - imageHeight);
}
/*if the object has the absolute positioning on it already and falls back past the top of the window (scrollTop), place it back fixed within it's row by removing the class "bottom"*/
if (scrollTop < mark && $('.rightWellContainer').hasClass('bottom')) {
$('.rightWellContainer').removeClass('bottom');
}
});
});
What I'm wondering is, if I wanted to add a second piece of right content in a separate parent div with the same behavior, how would I set up my current javascript/jquery to apply that behavior to each piece of right content independent of the others?
I'm trying to fix a elements position based on the scroll position within the window.
I thought it would be as easy as getting the offset of the element where the fixed element should become fixed and then when the window.scrollTop is equal to it add CSS but it is weird.
It seems as though the offset of the element is larger than the scrollTop largest numeral.
Is there any other way of getting this to work?
I want it to have the same functionality as this with regards to the footer on scroll;
http://be.blackberry.com/
But I don't want to clone the element, I want to detect when it gets to near the bottom of the page and then change the position on the bottom of the element.
Thanks in advance.
B
This should help get you in the right direction:
var footer = $("#footer");
// min amount to show when not scrolled to the bottom of the page.
var minVisable = 25;
$(parent.document).scroll(function() {
// check position
if (window.scrollY + window.innerHeight + minVisable > $("html").height()) {
// if at the bottom of the page, stick the footer to it
footer.css("position","absolute").css("top", $("html").height() - footer.height());
} else {
// else keep top part of footer on the screen
footer.css("position","fixed").css("top", window.innerHeight - minVisable );
}
});
I am working on a small jQuery plugin that autoscrolls through a set of overflowing elements within a container div based on the mouse position within that container div.
See the Demo Here
The idea is for this plugin to be an improvement of something I wrote a while ago. See the autoscrolling navigation in the lower left here The old problem with this was that it jumps around when you mouseenter from anywhere but the bottom(javascript perspective) of the container div.
Now everything is working fine with my plugin but when you mouseenter from the top it screws up from time to time(move your mouse in and out fast and it will happen for sure), I think this is because I am getting different values from my mouseenter event and my mousemove event which are both used to calculate how to scroll the inner elements. Here is the function, the rest of the source is pretty small and decently commented.
projList.mousemove(function(e){
//keep it from freaking out when we mouseenter from Top of div
if(enterMouseY > divHeight){
enterMouseY = divHeight;
}
mouseY = e.pageY-projList.offset().top;
//ok that didnt work... try to keep it from freaking out when we mouseenter from Top of div
if (mouseY > divHeight){
mouseY = divHeight;
}
//distnace from top of container div to where our mouse Entered
var distToTop = divHeight - enterMouseY;
//here is the calculation, I parameterize the mouseY pos as a value between 0-1
//0 being where we entered and 1 being the top or bottom of the div
//then multiply that by how much we have to scroll to get to the end of the list
//are we moving up or down
if(mouseY>enterMouseY){
//if up calculate based on Top
var dist =totalScrollDistance * ((mouseY-enterMouseY-projList.offset().top)/(distToTop));
}else if(mouseY<enterMouseY){
//if up calculate based on Bottom
var dist =totalScrollDistance * ((mouseY-enterMouseY-projList.offset().top)/(enterMouseY));
}else if(mouseY = enterMouseY){
var dist = 0;
}
//set the position of the list offsetting wherever we left it
pos = dist+lastPos;
//scroll to that position
projList.scrollTop(pos);
//are we trying to scroll past the scrollable amount
if(pos<0){
pos = 0;
}
if(pos>totalScrollDistance){
pos = totalScrollDistance;
}
$('#div1').text("mouseY: "+ mouseY +" enterMouseY: "+ enterMouseY +" distance:"+ dist.toFixed(1) + " pos:"+ pos.toFixed(1));
});
I solved this problem, there was an error in my calculations, but works how I described above.
You can see it in action here
http://web.archive.org/web/20130529212243/http://www.robincwillis.com/AutoScroll/