Develop Reference

Fade repeating after replacing image while scrolling with javascript

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();
});
}
});
});

Having the same nav bar become fixed after scrolling past a certain element

I currently have a nav bar within my header that I would like to become fixed after the user scrolls past a certain element. I would also like to achieve the same animation effect as seen at http://pixelmatters.com
When I say 'same' I mean using the same nav bar/header element that I'm using at the top, rather than using a duplicate somewhere else in my document.
I've tried to achieve he result with my own code shown below. I've also included a jsFiddle link of my current setup.
jQuery
var bottomElement = $('.dividerWrap').offset().top + $('.dividerWrap').height();
$(window).on('scoll', function() {
var stop = Math.round($(window).scrollTop());
if (stop > bottomElement) {
$('.header').addClass('isFixed');
} else {
$('.header').removeClass('isFixed');
}
});
https://jsfiddle.net/npfc8wsx/1/

I answered something like that few days ago. please take a look at this code:
$(window).scroll(function () {
var scrollTop = $(window).scrollTop();
var scrollToVid = $('#test').offset().top
console.log(scrollTop); //see window scroll distance //
console.log(scrollToVid); //see scroll to div offest//
if ($(window).scrollTop() >= scrollToVid) {
alert('You reached to the video!');
}
});
jSFiddle
Main Question
now for you some code must change:
$(window).scroll(function () {
var scrollToElem = $('.dividerWrap').offset().top
if ($(window).scrollTop() >= scrollToElem) {
$('.header').addClass('isFixed');
} else {
$('.header').removeClass('isFixed');
}
});

Stop scrolling page, scroll div

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!

Change margin top of div based on window scroll

I have a bar at the top of my page that is position fixed. When the user scrolls to a certain point I want the bar to start moving up as if it was relatively or absolutely positioned.
Right now the css of the bar changes from fixed to absolutely positioned but of course this sets the div straight to the top of the page.
I have been looking at this for ages and cannot get my head around how I would push the bar up one pixel at a time for every pixel scrolled past the _triggerOffset
Can anyone enlighten me?
function banner(){
var _barOffset = $('#top-bar').outerHeight(),
_navOffset = $('#navigation').offset().top,
_triggerOffset = _navOffset-_barOffset;
$(window).scroll(function() {
var _scroll = $(window).scrollTop();
if (_scroll >= _triggerOffset) {
$('#top-bar').css({'position':'absolute'});
}
});
}
banner();

I have done a fiddle.
Check this fiddle
Working Demo
$(document).ready(function() {
var postionToTriggerMove = 500;
var positioninitial = $(window).scrollTop();
var positioninitialLine = $(".line").offset().top;
$(window).scroll(function() {
var _scroll = $(window).scrollTop();
if(_scroll > positioninitial) {
if(_scroll >= (postionToTriggerMove - 5) && _scroll <= (postionToTriggerMove + 5) )
{
var topBarPostion = $(".line").offset().top;
$('.line').css({'position':'absolute',"top":topBarPostion});
}
}
else {
if(_scroll >= (postionToTriggerMove - 5) && _scroll <= (postionToTriggerMove + 5) )
{
var topBarPostion = $(".line").offset().top;
$('.line').css({'position':'fixed',"top":positioninitialLine});
}
}
positioninitial = _scroll;
});
});

You could try something like the below:
function banner(){
var _barOffset = $('#top-bar').outerHeight(),
_navOffset = $('#navigation').offset().top,
_triggerOffset = _navOffset-_barOffset;
$(window).scroll(function() {
var _scroll = $(window).scrollTop();
if (_scroll >= _triggerOffset) {
$('#top-bar').css({'position':'absolute','top':_triggerOffset - (_scroll-_triggerOffset)});
}
});
}
banner();
This code is highly untested, however what we are doing is initially setting the element to an absolute position and defining the top of this element as the _triggerOffset, then we take the difference between the current scroll and the triggerOffset and subtract this from the top position to make the bar move up the more you scroll down.
Not sure if that's what you had in mind, but I'd look at a solution like this. You might want to add some conditions in there to ensure that top never goes below 0 or the nav will go off the screen.

Thanks, had a play around with both examples and they worked pretty good.
In the end I tweaked my code and instead of making the bar position top 0px I made it position top with the pixels equal to the offset distance. Don't know why I didn't think of this before.
On another note I am using Shinov's code for anoher project as I quite like it :)
Thanks
function banner(){
var _barOffset = $('#top-bar').outerHeight(),
_navOffset = $('#navigation').offset().top,
_triggerOffset = _navOffset-_barOffset;
$(window).scroll(function() {
var _scroll = $(window).scrollTop();
if (_scroll >= _triggerOffset) {
$('#top-bar').css({'position':'absolute', 'top':_triggerOffset+'px'});
}else if (_scroll <= _triggerOffset){
$('#top-bar').css({'position':'fixed', 'top':'0px'});
}
});
}

Jquery when the user hits bottom of the page

I've been working on a scroll to top function for my website, and that part of it works fine. My problem is however that I have a fixed div that is overlapping my footer when it hits the bottom of the page.
Here is the function that I have working.
$(document).scroll(function (e) {
if (document.body.scrollTop >= 800) {
$('#beamUp').show(1000);
} else {
$('#beamUp').hide(1000);
return false;
}
});
Is there somehow I could detect when I hit that part of the page and stop the div from moving past that.Help is much appreciated!
jsFiddle: http://jsfiddle.net/zazvorniki/RTDpw/

Just get the height of the page, minus the height of the div in question, as well as the footer... make sure the top is never greater than that value... you'll also need an onresize event handler re-evaluate that value.
looking at your jsfiddle... here are my edits
In your scroll listener, I am checking for the position of the page, and adjusting the bottom position of the floater appropriately. I also set the initial display:none, so you don't need to call .hide() in your initial script. In addition, resizing the window has the effect of scrolling for your use, so I changed the listener for both events.
$(document).on('scroll resize', function (e) {
var viewHeight = $(window).height();
var viewTop = $(window).scrollTop();
var footerTop = $("footer").offset().top;
var baseline = (viewHeight + viewTop) - footerTop;
var bu = $("#beamUp").css({bottom: (baseline < 0 ? 0 : baseline) + 'px'});
if (viewTop >= 50) {
bu.show(1000);
} else {
bu.hide(1000);
}
});