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
Related
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});
});
I want to make my navbar become affixed when you scroll and it reaches the top even when you resize the window.
The position at which it's triggered is not updating even though I set it to recalculate the values when I $(window).resize(). What's wrong?
$(document).ready ->
$(window).resize ->
windowHeight = $(window).height()
navHeight = $('#navbar-affixable-wrapper > #navbar.affixable').outerHeight()
windowMinusNavHeight = windowHeight - navHeight
$('#navbar-affixable-wrapper > #navbar.affixable').affix
offset: { top: windowMinusNavHeight }
Or in javascript:
$(document).ready(function() {
return $(window).resize(function() {
var navHeight, windowHeight, windowMinusNavHeight;
windowHeight = $(window).height();
navHeight = $('#navbar-affixable-wrapper > #navbar.affixable').outerHeight();
windowMinusNavHeight = windowHeight - navHeight;
return $('#navbar-affixable-wrapper > #navbar.affixable').affix({
offset: {
top: windowMinusNavHeight
}
});
});
});
Can you return the offset top value as a function?
For example:
$(function(){
var $window = $( window );
var $navbar = $('#navbar-affixable-wrapper > #navbar.affixable');
$navbar.affix({
offset: {
top: function(){
// Calculate offset top value
return $window.height() - $navbar.outerHeight( true ); // I always pass true in there so margin is taken into consideration.
}
}
})
});
You can checkout the affix documentation on the Bootstrap website.
<script>
document.getElementById('listen-btn').addEventListener('click', function() {
document.getElementById('music-player').play();
});
<script>
$(window).scroll(function() {
if($(window).scrollTop() > 1400)
document.querySelector('#music-player').pause();
});
</script>
The button starts the audio player and scrolls to the section where the audio player is visible. When you scroll the the next section the audio player stops once you've scrolled 1400 but I need that to be relative. How to I make the 1400 a percentage (50%)
That is possible — some arithmetic will do the job. The trick is to retrieve the page height using $(document).height(). If you're referring to the viewport height though, then you will need to use $(window).height().
$(window).scroll(function() {
if($(window).scrollTop() > $(document).height()*0.5)
document.querySelector('#music-player').pause();
});
Try to use this code:
$(window).on('scroll', function() {
var st = $(this).scrollTop();
var wh = $(document).height();
// st : wh = X : 100
// x = (st*100)/wh
var perc = (st*100)/wh
// Your percentage is contained in perc variable
console.log('The percentage is '+perc);
});
i have div.triangle on my page at opacity 0
i want it to fade into opacity .95 once the bottom of the page is hit
then after that, i want it to scroll to the top of $(".container") once $(".triangle") is clicked again
i have this so far, i think i've got most of it right other than the event?
<script type="text/javascript">
$(document).ready(function(){
$(".container").scroll(function(){
var currentPosition = $(document).scrollTop();
var totalHeight = $(document).offsetHeight;
var visibleHeight = $(document).clientHeight;
if (visibleHeight + currentPosition >= totalHeight){
$(".triangle").fadeTo("slow",.95);
}
});
$(".triangle").click(function(){
$(".container").animate({scrollTop:0}, 'slow');
$(".triangle").fadeTo("slow",0);
});
});
</script>
try this:
$(document).ready(function(){
var bottom = ($(window).outerHeight() - $(window).height()) - 50; // 50 pixel to the bottom of the page;
$(window).scroll(function(){
if ($(window).scrollTop() >= bottom ) {
$(".triangle").fadeTo("slow",.95);
} else {
$(".triangle").fadeOut("slow");
}
});
$(".triangle").click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
$(".triangle").fadeOut("slow");
});
});
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/