Lightweight scrollUp function - jQuery - javascript

Trying to make simple jQuery function to create a scrollToTop button that fades in as you scroll down.
$(document).ready(function() {
var start = 300;
var duration = 200;
var scrolled;
$('.scrollUp').css('opacity', '0.0');
$(window).scroll(function(){
var opacity = (scrolled - start) / duration;
scrolled = $(window).scrollTop();
if (0 < opacity < 1) {
$('.scrollUp').css('display', 'block').css('opacity', opacity);
} else if (1 < opacity) {
$('.scrollUp').css('display', 'block').css('opacity', '1.0');
} else {
$('.scrollUp').css('display', 'none').css('opacity', '0.0');
}
});
$('.scrollUp').click(function(){
$('html, body').animate({
scrollTop: 0
}, 500);
});
});
See it in action here: http://jsfiddle.net/JamesKyle/fBvGH/

This works, tested in jsfiddle:
$(document).ready(function() {
var start = 300;
var duration = 200;
var scrolled;
$('.scrollUp').css('opacity', '0.0');
$(window).scroll(function(){
var opacity = (scrolled - start) / duration;
scrolled = $(window).scrollTop();
if (0 < opacity < 1) {
$('.scrollUp').css('display', 'block').css('opacity', opacity);
} else if (1 < opacity) {
$('.scrollUp').css('display', 'block').css('opacity', '1.0');
} else {
$('.scrollUp').css('display', 'none').css('opacity', '0.0');
}
});
$('.scrollUp').click(function(){
$('html,body').animate({
scrollTop: 0
}, 500);
});
});
Update:
And here's a working example with the opacity animation.
Looks like this guy was looking for the same equation.
Better to use some math in situation's like this:
scrolled = $(window).scrollTop();
height = $('body').height();
height = Math.ceil((scrolled / height) * 100);
height = height / 100;
Second Update
Ok, you want it to start appearing after the dark blue section. Ok, so what you need to do is exclude that portion of the top before the gradient. You can do that by making an if clause that checks if the scrollTop value has hit the top part of the light blue gradient; around 300px from the top of the document. Then instead of using the body height in the above equation, use the total height of the gradient section; about 210px. This value will replace the var height in the jQuery above. Let me know if you have issues implementing this. Didn't notice you're comment on the above answer.

scrollTop is not a window property, so just change you code slightly:
$(window).animate({scrollTop : 0},500);
to
$('html, body').animate({scrollTop : 0},500);
here's the updated jsfiddle: http://jsfiddle.net/fBvGH/13/

Related

Hide image after certain amount scrolled

I’ve been successful using the code below to hide the element on scroll, but I need to tweak it so it changes opacity after the user scrolls 80vh:
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
$('.image123').css({
opacity: function() {
var elementHeight = $(this).height(),
opacity = ((elementHeight - scrollTop) / elementHeight);
return opacity;
}
});
});
Try this:
$(window).scroll(function () {
var vh = (document.documentElement.clientHeight * 80) / 100;//80vh to px
var scrollTop = $(this).scrollTop();
var current = parseFloat($('.image123').css('opacity'));
var opacity = Math.min(Math.max((scrollTop >= vh ? current - 0.1 : current + 0.1), 0), 1);
$('.image123').css({opacity: opacity});
});

Animate element based on scroll position inside absolute div with overflow: scroll

I'm trying to animate an element based on the scroll position inside a div with the properties position: absolute and overflow: scroll. The code I've got to so far is basing the animation based on the position on the page position, and changing the opacity. I want to change the property filter: blur(value); Below is the code (opacity, not div based scroll) as it exists now:
var header = $('div.modal-container figure.still');
var range = 200;
$(window).on('scroll', function() {
var scrollTop = $(this).scrollTop(),
height = header.outerHeight(),
offset = height / 2,
calc = 1 - (scrollTop - offset + range) / range;
header.css({
'opacity': calc
});
if (calc > '1') {
header.css({
'opacity': 1
});
} else if (calc < '0') {
header.css({
'opacity': 0
});
}
});
Any help on how I can accomplish this?
If you have in calc variable radius of blur in pixels, try something like this:
header.css({
'filter': `blur(${calc}px)`
});
if (calc < 0) {
header.css({
'filter': 'none'
});
}

Fade In and out on scroll with opacity value setting

Here's my script:
jQuery(document).ready(function(){
jQuery(window).scroll(function () {
var scrollTop = jQuery(window).scrollTop();
var height = jQuery(window).height();
jQuery('.background_top_dissolvenza').css({
'opacity': ((height - scrollTop) / height)
});
});
});
I would like to stop the opacity value at 0.5 while now it reaches 0 and even further, with negative values ​​as I scroll.
Any suggestions? Thanks!
You're going to want to use Math.max().
jQuery(document).ready(function(){
jQuery(window).scroll(function () {
var scrollTop = jQuery(window).scrollTop();
var height = jQuery(window).height();
jQuery('.background_top_dissolvenza').css({
'opacity': Math.max((height - scrollTop) / height, 0.5)
});
});
});
Here's a working fiddle

opacity on scroll with jquery

I'm trying make the opacity of my div gradually increasing, as will moving the scroll, like this
$(document).ready(function() {
$(document).scroll(function(e) {
opacidade();
});
var element = $('#element');
var elementHeight = element.outerHeight();
function opacidade() {
var opacityPercent = window.scrollY / 100;
if (scrollPercent <= 1) {
element.css('opacity', opacityPercent);
}
}
});
is working but the opacity is uping very fast i find example decrease opacity but no uping upacity if in my rule css my div is declared opacity 0 any knwo how should be
Altered:
jsFiddle
$(document).ready(function() {
$(document).scroll(function(e){
opacidade();
});
var element = $('#element');
var elementHeight = element.outerHeight();
function opacidade(){
var opacityPercent = window.scrollY / $(document).height();
console.log(window.scrollY, opacityPercent);
element.css('opacity', opacityPercent);
}
});
The scrollY is a pixel value, so unless you limit your possible scroll range [0 - 100], there's no reason to divide it by 100.
So what you need is divide the scroll by the total document's height (or whatever it's parent that contains it and display a scrollbar)

jQuery toggle element class based on scroll percentage

I want to change the var num into a percentage instead of a number of pixels.
how can I do this?
I need this for my site:
http://www.sutanaryan.com/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/
But they work with pixels, and my website works with % (because autoscaling for example on a HD screen or a Full HD screen)
/* Dynamic top menu positioning
*
*/
var num = 150 ; //number of pixels before modifying styles 150
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
//USE SCROLL WHEEL FOR THIS FIDDLE DEMO
First, let me tell you this is a horrible solution. Listening to every scroll event and calling addClass() or removeClass() every time is expensive. // end preach
Here's the answer to your question anyway:
var baseHeight = $(window).height(); // for body, use $("body").height();
var num = .25; // this the percentage of vertical scroll
$(window).bind('scroll', function () {
if ($(window).scrollTop() / baseHeight > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});

Categories