Content fade based on scroll position - javascript

I have the below function set in place to fade out/in certain content based on its proximity to the top/bottom of the page. The desired effect is pretty visible and obvious if you click on the ABOUT link on the top, but if you use the WORK button to scroll down the content just pops in at the right position but the fading does not occur as it does with the top.
I'm sure it has something to do with the scrollBottom equivalent I've created but not sure how to go about fixing this
http://coreytegeler.com/new
$(window).load(function(){
$(window).scroll(function() {
var st = $(window).scrollTop();
var sb = $(document).height() - $(window).height() - $(window).scrollTop();
$('#about .content').css({'opacity' : (1 - st/450)});
$('#work .content').css({'opacity' : (450 + sb*-1)});
$('#home .content').css({'opacity' : (-(450 + sb*-1))});
$('#home .content').css({'opacity' : (-(1 - st/450))});
});
});

In my browser, your page loaded with a document height of 2892 and a window height of 952. Plugging those dimensions into your equations gives the opacity of #work varying from -1478 to 450. This has it starting to display when the window is 450px from the bottom, fully fading in when the window is 451px from the bottom - probably a little faster than you intended.
If you change the work line to
$('#work .content').css({'opacity' : ((450 + sb*-1)/450)});
then your opacity will vary from -3.28 to 1, crossing 0 and starting to fade in when the window has scrolled to 450px from the bottom, reaching 1.00 (100% fade in) when the window has scrolled all the way down.

Related

Scroll down all the way to the point where div is visible

I have a function where I enable scrolling only to for the difference of the div height and window height, so that it doesn't scroll down from the point where div ends.
But that is not what I want, because if I resize the screen to smaller size, user is not able to scroll all the way down to the end of that particular div. How can I modify this so that I enable scrolling to the point where the div is visible and only to that point and not over it?
scrollPoint = $(".magazine-section").offset().top - $(window).height();
$(window).scroll(function() {
$(window).scrollTop() > scrollPoint ? $(window).scrollTop(scrollPoint) : '';
}).scroll();
You need to set scrollPoint again when the window is resized using $(window).resize().
$(window).resize(function() {
scrollPoint = $(".magazine-section").offset().top - $(window).height();
}

How do you detect top of an element is near of the bottom of browser with jQuery?

How do you detect top of an element is near of the bottom of browser with jQuery?
when I scroll down, if bottom of browser reach to top of an specal div,it alert me, and when I scroll up and bottom of browser reach to the top of that div,alert me again?
something like this website when scroll it down or up. (jquery effect)
I think you looking for this. you can do this using below code.
var ScrollBottom = 100;
if ($(window).scrollTop() + $(window).height() >
$(document).height() - ScrollBottom) {
// your ajax call here
}

Add class once user scrolls down?

I'm designing a vertical scroll website where each page is a 105% tall div.
I'm having a bit of trouble getting Javascript to slap a class on a div once the user scrolls down.
The div in question is on the second page, so around 170% from the top. So far I have this:
$(window).scroll(function() {
var height = $(window).scrollTop();
var q = 1.7;
if(height >= q) {
$(window).off("scroll");
$('#A2').addClass('animated bounceIn');
}
});
Unfortunately, it doesn't seem to be working.
Nothing wrong with your script here: http://jsbin.com/dixuqoku/1/edit
To compare to 170% of the viewport height, you could just multiply the viewport height with 1.7:
var oneSeventy = $(window).height() * 1.7;

Detecting when user has scrolled to the pixel just before seeing the footer

I'm trying to detect when my user has scrolled to the point just before he sees the first pixel of the footer.
Here is how I'm trying to calculate the position just before the footer:
footerVisible = $(document).height() - $(window).height() - $('footer').height() - 1;
alert(footerVisible);
I'm taking the height of the whole document and subtracting the viewport height and the height of the footer.
This alerts me 3695.
Now I'm logging the scroll position like this:
$window.scroll(function(e){
console.log($window.scrollTop());
}
When scrolling all the way to the bottom of the document (ie: seeing the full footer and end of document) the console indicates I'm at position 3211.
My logic is clearly flawed somewhere...
How can I calculate the 'scrollTop' position that the user will be on just before he sees the first pixel of the footer.
Can anyone provide a fiddle that throws an alert juste before the user sees the footer?
EDIT
Fiddle available here
To see the "first pixel of the footer", the scroll position will have to be one pixel less from one window height from the height of the footer.
var footerVisible = $(document).height() - $(window).height() - $('footer').height() - 1;
Your scroll function should be something like this:
$(window).scroll(function() {
if( $(window).scrollTop() >= footerVisible ) {
alert('Footer Visible');
}
});

How to make a parallax background for indefinite page height?

I have a website that uses a parallax background, the background is 1200px long.
The issue is:
I have a page with indefinite height, the page get expanded dynamically to its content. So if a user press read more it expands without refresh, which ruin the parallax effect because the background reaches its end before the page finish.
The background is complex design image, it cannot be repeated and adding background-color to cover up the white space cant be done, but I wish I can keep the cool parallax effect!
My question:
Is it possible to make the parallax stop when it reaches a specific y-position, and freezes the background when scrolling beyond the specific y position? But also to be able to trigger on the parallax effect when scrolling back to the specific y-position and above?
If we assume background is moving at 0.1 speed, then the max height will be 1200/0.1 = 12000px.
If page reaches y-position = 12000px -> stop parallax effect and freeze image as is -> and if page return back to 1199px start parallax again
How to do this in Javascript? If possible in CSS would be great too.
Edit:
here is what I did before posting on Stackoverflow:
I used Stellar.js for the parallax effect, simply i added the following javascript:
$(window).stellar({responsive:false});
and added the following code to the tag (which hold the background-image):
<body data-stellar-background-ratio="0.1">
I also tried another approach, by using a custom JavaScript I found in the web:
$( window ).scroll( function(){
var ypos = $( window ).scrollTop(); //pixels the site is scrolled down
var visible = $( window ).height(); //visible pixels
const img_height = 1261; //image height
var max_scroll = img_height - visible; //number of pixels of the image not visible at bottom
//change position of background-image as long as there is something not visible at the bottom
if ( max_scroll > ypos) {
$('body').css('background-position', "center -" + ypos + "px");
} else {
$('body').css('background-position', "center -" + max_scroll + "px");
}
});
in this case, it do scroll until the end of the background, But I can't figure out how to slow down the scroll speed of the background.

Categories

Resources