I'm trying to replace the logo image in heading of the page when scrolling, with fade effect. It starts working in the correct way, and the image replacement is done but while you continue scrolling down the site, the new logo continues fading.
Here's my code:
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 100) {
$(".navbar-fixed-top").addClass("nav-scrolled");
$('#logo').fadeOut('',function(){
$(this).attr('src','Template/images/logo-scrolled.png').fadeIn();
});
}
else{
$(".navbar-fixed-top").removeClass("nav-scrolled");
$('#logo').fadeOut('',function(){
$(this).attr('src','Template/images/logo.png');
});
}
})
})
You can see it in www.ultramarinosvillena.com
How could I fix it?
EDIT: sorry, my mistake - first thinking then posting. ;) One of the conditional statements was triggered with each scroll event - now it will only be triggered once, when the scrolling point is reached.
You should check the nav-scrolled class:
$(document).ready(function(){
var $navbar = $(".navbar-fixed-top"),
$logo = $("#logo"),
currentScroll;
$(window).on('scroll', function(){
currentScroll = $(window).scrollTop();
if ( currentScroll > 100 && !($navbar.hasClass('nav-scrolled')) ) {
$navbar.addClass("nav-scrolled");
$logo.fadeOut('',function(){
$(this).attr('src','Template/images/logo-scrolled.png').fadeIn();
});
} else if ( currentScroll < 100 && $navbar.hasClass('nav-scrolled')) {
$navbar.removeClass("nav-scrolled");
$logo.fadeOut('',function(){
$(this).attr('src','Template/images/logo.png').fadeIn();
});
}
});
});
Related
I'm trying to fix an issue whereas when the user scrolls, the elements in viewport already, starts triggering the animation a second time. This only happens when the page is loaded at the very top of the page then proceeding to scroll down. When positioned anywhere else on the page, it works fine and elements animate correctly and doesn't trigger twice in-view. To reiterate, the main issue is when the <section> tags animate, it'll animate again after page load when I scroll from the very top down, sort like a flashback initially, which I don't want. How do I fix this bug?
Here's the jsfiddle: https://jsfiddle.net/TheAmazingKnight/oybta7dp/10/
Code Attempt:
I tried something like this to do a check if these elements are already in view, dont trigger the animation until it has left view and reenters, but it doesn't work.
if ($(this).isInViewport()) {
if($(this).parent().hasClass("animate-section") && $(this).parent().hasClass("animate")) {
$(this).removeClass('animate-element');
$(this).removeClass('animate');
return false; // abort function if element is already in view preventing double animation
}
}
jQuery Code:
$(document).ready(function() {
var flag = true; // var to detect if function already ran once
if (flag) {
// Set the animation to be triggered when the section comes into view
var sections = $('.animate-section');
sections.each(function() { // check which sections are in-view on page load
if ($(this).isInViewport()) {
$(this).addClass('animate'); // Add the "animate" class to trigger the animation
} else {
$(this).removeClass('animate'); // Remove the "animate" class if the section is out of view
}
});
flag = false; // change boolean var as function already ran once
}
// Set the animation to be triggered when the element comes into view
var elements = $('.animate-element');
$(window).scroll(function() {
elements.each(function() {
if ($(this).isInViewport()) {
if($(this).parent().hasClass("animate-section") && $(this).parent().hasClass("animate")) {
$(this).removeClass('animate-element');
$(this).removeClass('animate');
//return false; // abort function if element is already in view preventing double animation
}
$(this).css("visibility", "visible");
$(this).addClass('animate'); // Add the "animate" class to trigger the animation
} else {
$(this).css("visibility", "hidden");
$(this).removeClass('animate'); // Remove the "animate" class if the section is out of view
}
});
});
});
// jQuery function to check if element is visible in viewport
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
EDIT:
Since this double animation effect only occurs at the top of the page, I added a code hack workaround for the time being. But if anyone can figure out a resolve would be great. Thanks!
$(document).ready(function () {
// code hack to scroll ever-so-slightly to trigger animating the elements only if initially loaded at the top of page to avoid double animation effect when user scrolls
if (window.scrollY == 0) {
Scrolldown();
}
});
// function to scroll ever-so-slightly
function Scrolldown() {
window.scroll(0, 1);
}
If I got it correctly, you want the animation for all the elements in the view when the page load, and then, just for the new ones while scrolling. I played around with your code and this is what I came up with.
/* CHAT PROMPT: Add some jQuery code where as when the user scrolls through the page, the section will animate as they come into view. */
$(document).ready(function() {
$('.animate-element').addClass("animate");
// Set the animation to be triggered when the element comes into view
var elements = $('.animate-element');
$(window).scroll(function() {
elements.each(function() {
if ($(this).isInViewport()) {
$(this).css("visibility", "visible");
$(this).addClass('animate'); // Add the "animate" class to trigger the animation
} else {
$(this).css("visibility", "hidden");
$(this).removeClass('animate'); // Remove the "animate" class if the section is out of view
}
});
});
});
// jQuery function to check if element is visible in viewport
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
I just removed that flag logic and added the "animate" class to all the element that should be animated at loading. When the scroll function is triggered, those elements already have the "animate" class, so they won't be animated again.
Here the jfiddle: https://jsfiddle.net/r25v7qot/1/
Having problems with Scrolltop - have got it to change smoothly when scrolling down, but doesn't revert to the original css when scrolling back up.
I've tried switching the order around but nothing works. Can anyone tell me where my code is wrong?
Thanks
$(function() {
var topblock = $(".topblockfix");
var header = $(".header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if ($(window).scrollTop() > $('.topblockfix').offset().top) {
if (scroll >= 250) {
topblock.removeClass("topblockfix").addClass("topblockfix-alt");
header.removeClass("header").addClass("header-alt");
} else {
topblock.removeClass("topblockfix-alt").addClass("topblockfix");
header.removeClass("header-alt").addClass("header");
}
}
});
});
You have a logical mistake in the first if-statement.
You are checking the offset top of $('.topblockfix'). But you remove the class .topblockfix and set it to .topblockfix-alt.
So you need to update your if statement:
if ($(window).scrollTop() > $('.topblockfix').offset().top || $(window).scrollTop() > $('.topblockfix-alt').offset().top) {
or you have to cache the value of $('.topblockfix').offset().top somewhere
I'm new to this stuff.
I'm using this to make a div appear on scroll and to make it disappear when I scroll further.
It's working pretty good. It fade's out when I pass 1750. But on page load the div is already there. It should appear when I scroll past 1500.
What I need is the div be visible between 1500 and 1750. Hope you can help!
<script type="text/javascript">
$(document).scroll(function () {
var x = $(this).scrollTop();
if (x > 1500) {
$('#form_1_container').fadeIn(150);
} if (x > 1750) {
$('#form_1_container').fadeOut(150);
}
});
</script>
This is the site = http://www.stilld.nl/brrreuk/
You can see if you scroll, that the div appears and disappears. But then it start to pulse...
I'm using display=none on my div.
You can try this
$(document).scroll(function () {
var x = $(this).scrollTop();
if (x > 1500 && x < 1750) {
$('#form_1_container').stop().fadeIn(150);
}
else{
$('#form_1_container').stop().fadeOut(150);
}
});
I'm creating this landing page: http://tag4share.com/landing/#
Where is located the two galaxy s3 (one white with "Organizador" label on it and a black with "Participante" label), I want to stop scrolling the page and automatically start scrolling the content inside the mobile (an iFrame, div, anything).
Is it possible?
Basically I want to "focus" the scrolling inside a div (and make it work even if the cursor isn't hovering it). Or animate while scrolling without scrolling the body.
Example: http://www.google.com/nexus/5/
On the "Everything you need to capture the moments that matter." part.
My attempt:
var lastScroll;
var currentScroll = $(window).scrollTop();
$(window).scroll(function() {
lastScroll = currentScroll;
currentScroll = $(window).scrollTop();
if($(window).scrollTop() >= 2024 && $(window).scrollTop() < 2500)
{
var difference = currentScroll - lastScroll;
$(".main").css({"margin-top":"-="+currentScroll});
}
});
I've tried to move the main div along with scrolling. It works but it looks really strange (keeps shaking).
Thanks!
I've just tidied up your code a tad, fixed indentation etc.
As for actually scrolling your div when you hit the position, use animate to actually mimic the scrolling effect, once you know you have reached the bottom, you can put another if statement within the scroll function to stop resetting the scroll position.
var lastScroll;
var scrollPosition = $(window).scrollTop();
var reachedBottom = false;
var phonePositionTop = $('#phoneContainerID').position().top;
var phonePositionBottom = phonePositionTop + $('#phoneContainerID').height();
$(window).scroll(function() {
if(scrollPosition >= phonePositionTop && scrollPosition < phonePositionBottom && reachedBottom == false){
var difference = currentScroll - lastScroll;
// Keep resetting scroll to the phoneContainerTop position
$(".main").css({"margin-top": phonePositionTop});
var scrollLimit = -100;
if ($('#phoneContainerID').position().top < scrollLimit) {
//Once the scroll limit is less than -100 (scrolled up 100 pixels)
// Disable our 'pause' effect, and continue
reachedBottom = true;
}
}
});
I haven't tested this, however I was just giving you an idea of where to go from here.
I hope I have helped a little!
simple question, easy points, cannot find the answer in SO. The javascript function below alerts when a user scrolls to the bottom of a div. I have many divs, but I only want the alert to run when a div id=imageloc is scrolled.
$(window).scroll( function() {
if ( document.documentElement.clientHeight + $( document ).scrollTop() >= document.body.offsetHeight ) {
if (this.id == "imageloc" ) {
alert("bottom of the page.");
}
}
});
The javascript function below alerts when a user scrolls to the
bottom of a div. I have many divs, but I only want the alert to run
when a div id=imageloc is scrolled.
Maybe I have misunderstood, but it's phrased like you have many scrollable divs and want to do something if one of them is scrolled to the bottom. Then you should listen to scroll event on this particular div:
$("#imageloc").scroll( function(e) {
if ( this.scrollTop >= this.scrollHeight - this.offsetHeight ) {
console.log( 'bottom' )
}
});
http://jsfiddle.net/aheh5/
If you want to do something when the document has been scrolled past the bottom of a particular div try this: http://jsfiddle.net/aheh5/1/ (it will, however, trigger every time the user scrolls the window and #imageloc is above the viewport).
Use like this
$(window).scroll(function() {
var winTop = $(this).scrollTop();
var $divs = $('div');
var top = $.grep($divs, function(item) {
return $(item).position().top <= winTop;
});
alert($(top).attr('id'));
});
You can try something like this,
var imgLocTop = $('#imageloc').offset().top ;
var $window = $(window);
var limit = Math.abs($window.height() - imgLocTop);
$window.scroll( function() {
if($window.scrollTop() >= limit) {
alert('Reached the required div');
}
});
Demo