Develop Reference

How to change the scrolling position?

I want to have my content fade in on scrolling, but it reacts to late. How can I change it, to have my content fade in earlier?
I am very new to javascript and couldn't get it worked yet.
$(window).on("load",function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});
Right now the content space is blank until I scroll to the bottom. I need to have my content fade in when it is on like half of the page or earlier. Maybe changeable to any height with percent or pixel?

The shared portion of code fades element in once they are completely in the viewport (= when bottom of the elements is in the window).
How about fading elements in as soon as their tops get in the viewport?
Fade out logic should remain as is: elements should be faded out once their bottom get out of the viewport.
Adapted code:
$(window).on("load",function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* Check the location of each desired element */
var objectTop = $(this).offset().top
, objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element's top gets within bounds of the window, fade it in */
if (objectTop < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
} else if (objectBottom >= windowBottom){ //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});

How to check if the user scrolled to 30% of an element, from the top or the bottom

As specified in the title, I'm listening to scroll event in order to fire a function when 30% of a video shows up in the window - regardless whether the user scrolls up or down.
What is have is this:
// On DOM ready, I set the top and bottom offset of the video,
// +/- 30% of the video height
var $video = $('#js-b2b-video');
var videoHeight = $video.outerHeight();
var videoHeight30 = parseInt(videoHeight/3, 10); // Approx. 30% of the video height
var videoObj = {}
videoObj.top = $video.offset().top + videoHeight30; // Approx. 30% from the top of the video
videoObj.bottom = videoObj.top + videoHeight - videoHeight30; // Approx. 30% from the bottom of the video
Then, the scroll event:
$(window).on('scroll', function() {
if ($(window).scrollTop() >= videoObj.top) {
alert('30% from the top of the video reached');
}
});
However, this fires too late, when the video is fully visible. What I need is to fire my function immediately when 30% of the top or bottom of the video is visible.
How do I do this properly?
Fiddle

You need to take the window height into account.
if ($(window).scrollTop() + $(window).height() >= videoObj.top) {

You probably need to consider the window height as well:
if ($(window).scrollTop() + window.innerHeight >= videoObj.top) {
Note that you might want to test on onload and resize too...
Try it

Scrolling Opacity Shift To and From Targeted Element

I'm trying to get an overlay div's opacity to fade to black as you approach a targeted element in the middle of the page, and then fade back to transparent after that element exits the viewport.
(Broken) Example: https://jsfiddle.net/dtcgbxcn/3/
As you approach the 'blue' section, it should get darker. The page should be solid black before the blue section enters the viewport. Then, after the blue section exits the viewport, it begins to gradually fade out the opacity. By the time you reach the bottom of the page (or another targeted element), the overlay should be fully transparent again.
Note that, due to responsiveness, the height of any of these sections is indeterminate.
$(window).on('scroll', function() {
var st = $(this).scrollTop(),
offset = $('.blue').offset().top - $('.blue').height(),
opacity = st / offset;
_docHeight = $('.red').height() + $('.blue').height() + $('.yellow').height();
$('.overlay').height(_docHeight);
if (opacity > 2) {
opacity = 3 - opacity;
}
$('.overlay').css('opacity', opacity);
});

I have fiddled around with your example, Hopefully this is what you were looking for as far as functionality. It should be 100 opacity right before the blue appears, and 100% clear as the blue comes off the screen. I would prob warp this whole thing in a closure, and cache the selectors so you don't have to call $() every time, but other than that - this should work.
Your fiddle was a little different than your example above - but let me know if this is what you are looking for.
https://jsfiddle.net/gmydzzmf/1/
$(window).on('scroll', function() {
var st = $(this).scrollTop(),
win_height = $(window).height(),
offset = $('.two').offset().top - $('.two').height() - ( win_height / 2),
_docHeight = $('.one').height() + $('.two').height();
if (st<offset ){
// fading in
opacity = st/offset;
} else {
// fading out
opacity = ((_docHeight - st)/(win_height*2));
}
$('.overlay').height(_docHeight); //move this to resize event
$('.overlay').css('opacity', opacity);
});

Fix on scroll but with varying screen size no set pixel distance

I have a div with an image background thats height is 100% so it fills the screen on any device. At the bottom of the screen is then a navigation bar. When the page is scrolled I want the navigation bar to fix to the top of the screen at a set distance away from the top.
I have tried using this JavaScript:
$(window).scroll(function(){
if ($(this).scrollTop() > 587) {
$('.hnav').addClass('hfixed');
} else {
$('.hnav').removeClass('hfixed');
}});
It works fine on my screen but on any other screen it doesn't because the navigation changes distance from the top depending on the window size because of the 100% height image.
How can I get the navigation to fix in place when its a set distance from the top regardless of the window size??
Thanks

You can get the element's position with element.getBoundingClientRect(), so you can add the 'hfixed' class once this returns a top value of 0:
var nav = $('.hnav');
var pos = nav.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos + 50 >= pos.top) {
nav.addClass("hfixed");
} else {
nav.removeClass("hfixed");
}
});
EDIT:
Added an extra margin of 50px to the calc, because the top bar.
EDIT 2:
Changed the example, now it's based on this
EDIT 3:
Add the 50px margin because the top bar to the new example

Fade element opacity on scroll based off window width

I'm trying to fade in an element based off when it first enters the viewport then have it equal 100% opacity by the time it hits the end of the viewport. I have working as far as reaching 100% opacity when it gets to the end. However, when it starts animating, it starts out at about 60% which I know is because I am basing it off the scroll position. So my question is how can I calculate the opacity starting at 0 once it enters the viewport?
This is what I have so far:
$('.left-cont').each(function() {
var $this = $(this),
leftPos = $this.offset().left,
fadeStart = leftPos - winWidth,
fadeUntil = leftPos,
opacity;
console.log( winWidth - (leftPos - scrollPos));
console.log(fadeStart);
if( scrollPos <= fadeStart ) {
opacity = 0;
}
else {
opacity = scrollPos/fadeUntil;
}
$this.css({
'opacity': opacity
});
});
I can provide more context if needed. Any help is appreciated.

1) Is this jQuery function only executed once or is it placed inside the onScroll-binded function?
$( window ).scroll(function() {
/* get scroll top and left values here */
$( ".box" ).each(function(){
/* do position check and css adjustments here */
});
});
2) The calculation for the opacity is:
(1 - ((box_offsetTop - scrollTop) / windowHeight))
3) I made a working example here for scrolling vertically: http://jsfiddle.net/0mks8eut/1/
You can change it to calculate opacity based on horizontal scrolling by (un)commenting the other calculation inside the function.
! Make sure that there is enough content (or padding/margin) after/next to the object. Otherwise it will never reach opacity:1 (e.g. the top/left of the screen).