The new Yahoo page

maya90 · February 22, 2013, 3:10am

this is a cool effect I started seeing very recently… yahoo has it in two parts on their new home pg:

the first one is:

right after you start scrolling the style for the top section (div#masthead) changes to a drop shadow. it’s neat… in addition to adding the drop shadow, they change it from position relative to position absolute; clever…

what I want to know is how is the “scrolling” event captured… of when to start applying the style changes… I hope it’s just a jQuery event…

if you scroll further down the other one is about half way down, the sidebar on the right stops scrolling with the rest of the content and stays static… I really like this effect… what is the event to trigger this?

(I wish event triggers were as easy to see in firebug as the CSS is…

thank you…

James_Hibbard · February 22, 2013, 8:24am

Hi,

The Yahoo page doesn’t use jQuery, but that is not to say that you couldn’t achieve the same effect anyway.
With jQuery you can bind an event handler to the “scroll” JavaScript event using [.scroll()](http://api.jquery.com/scroll/)
To achieve a similar effect, you would probably check the scrollTop value of the main div and apply the appropriate CSS values, as soon as it comes into or goes out of view.

This is known as parallax scrolling.
Here’s someone asking the same question: http://stackoverflow.com/questions/13078800/parallax-sidebar-scrolling

HTH

maya90 · February 23, 2013, 3:35pm

thank you… am trying this now (the top part…) .scroll() works like a charm, but when I get to the top of the page and try to remove the class I added on scroll(), it gets a bit more challenging… based on what’s here and [URL=“http://www.devcurry.com/2010/10/use-jquery-to-detect-if-user-has.html”]here, I did…


if ($(window).scrollTop() == 0) {
	$('#header').removeClass('headerScroll');
 }

but it’s being ignored…

thank you…

James_Hibbard · February 23, 2013, 3:43pm

I was playing about with this and made a small demo of the effect you are trying to achieve.
You can find it here.

The JS that is responsible for applying the class on scroll:

$(window).scroll(function(){
  if ($(document).scrollTop() > 70){
    $("#header_container").addClass("shadow");
  } else {
    $("#header_container").removeClass("shadow");
  }
});

You can have a look at the source code to see the rest.

Please note that if you use this code on a live page, you should save a reference to $(document) and $("#header_container") and use those instead of querying the DOM every time the window scrolls.

maya90 · February 23, 2013, 5:50pm

[FONT=Lucida Sans Unicode]this works!!! thank you…

PS (edit): I want to be able to remove the class for scrolling (i.e., return to default state) when user reloads the page… but unfortunately reload event does not repond to $(document).ready(function(){… yikes…

is there a way around this??

thank you…

[/FONT]

James_Hibbard · February 23, 2013, 6:25pm

When you reload the page the ready event will definitely fire.
It must be something else on your page.
Could you post a link or the appropriate code so that I can recreate your problem.

Edit: or do you mean you want the text to return to its initial position?

maya90 · February 23, 2013, 6:30pm

hmmm… this is my code:

$(document).ready(function() {

	$('#header').removeClass('headerScroll');
	
	$(window).scroll(function(){
		if ($(document).scrollTop() > 70){
			$('#header').addClass('headerScroll');
		} else {
			$('#header').removeClass('headerScroll');	
		}
	});
	
});

my example

thank you…

James_Hibbard · February 23, 2013, 6:50pm

Hi there,

Try this:

$(document).ready(function() {
  setTimeout(function() { 
    $(window).scrollTop(0); 
  }, 150);

  $(window).scroll(function(){
    if ($(document).scrollTop() > 70){
      $("#header").addClass("headerScroll");
    } else {
      $("#header").removeClass("headerScroll");
    }
  });
});

maya90 · February 23, 2013, 7:33pm

once again, that worked!!

thank you very much…

James_Hibbard · February 23, 2013, 7:34pm

Happy to help
I’m just working on recreating the second effect you mentioned.
I’ll post back when I’m done.

maya90 · February 23, 2013, 7:49pm

awesome!!! :-)) can’t wait to see it…

thanks again…

James_Hibbard · February 23, 2013, 8:53pm

Here’s a demo of the sticky sidebar.
As with the last one, the JS is at the bottom of the page, so just look at the source code and you can see how I’ve done it.
Any questions, just give me a shout.

Oh, and by the way, now that I’ve had time to look at it properly, what I said in my first post about this being an example of parallax scrolling isn’t really correct.
I don’t know what you would call this, but parallax scrolling is more a technique where, as you scroll, background images translate slower than the content in the foreground, creating an illusion of 3D depth.
Here’s a few examples: http://www.tripwiremagazine.com/2012/07/parallax-scrolling.html

Hope that helps.

Lemon_Juice · February 23, 2013, 9:42pm

Good to know not everyone lost their sanity :D.

I agree this is a cool effect and I’ve been wondering how to achieve it - and thanks to this thread and a tiny bit of googling I found the native window.onscroll event :).

maya90 · February 24, 2013, 3:01am

thank you… it’s awesome…

the examples you posted also… this one is particularly cool…
http://www.culturalsolutions.co.uk/

James_Hibbard · February 24, 2013, 12:34pm

Haters gonna hate …

I would hate that to be all you take away from this thread @Lemon_Juice ;
So, here’s the equivalent function in plain ol’ JavaScript

window.onload = function() {
  var sidebar = document.getElementById('sidebar'),
      overlap = sidebar.scrollHeight - window.innerHeight,
      b = document.getElementsByTagName('body')[0];
      
  window.onscroll = function(){
    if (b.scrollTop > overlap && !sidebar.className.match(/fixed/)){
      sidebar.className = sidebar.className + " fixed";
    } else if(b.scrollTop < overlap && sidebar.className.match(/fixed/)){
      sidebar.className = sidebar.className - " fixed";
    }
  }
}

I also added a check to see if the element already has a class of “fixed”.

maya90 · February 25, 2013, 2:52pm

not working in IE8 (I mean the drop shadow doesn’t get implemented… I guess need to think of something for IE8… (haven’t been able to test on IE9… was wondering if anyone here can look in IE9?)

thank you…

James_Hibbard · February 25, 2013, 8:25pm

Hi,

I can confirm that it works in IE 9 & IE 10.
The reason it doesn’t work, is that IE 8 (and below) doesn’t support drop shadow.
The JS, however, is still doing what it should.

You can achieve drop shadow in IE 8 using -ms-filter
Here’s an article explaining how: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

Lemon_Juice · February 25, 2013, 11:08pm

Sure, but if you think that I’m a jQuery hater then you are only half right because my relationship with jQuery is 50/50 love and hate. BTW, I used a smiley after my sentence to indicate I wasn’t 100% serious! :). What I wanted to say is I’m glad plain javascript isn’t dying out - just for the sake of variety at least…

What’s wrong with taking away what I’m most interested in? The thread has been useful for me because I learned there is a scroll event. The implementation details are not that important to me because they are fairly easy to figure out once I know that the scroll event exists and I can come back here later in case I need some ideas when I need them.

I’m wondering how this line is supposed to work? I thought I wasn’t aware of javascript support of the minus operator on strings but from what I have tested it is not supported…

There is also a nice library for backporting some css effects to IE <= 8: CSS3 PIE - I have used it a few times and it’s neat in that I don’t have to worry about translating my css to some other obsure IE-filter format. I can honestly recommend it!

maya90 · February 25, 2013, 11:13pm

thank you Pullo!!!

will certainly try this…

James_Hibbard · February 26, 2013, 6:35am

If you used a smiley to indicate that you weren’t 100% serious and you proceed the sentence that says you weren’t 100% serious with a smiley, that means you weren’t 100% serious about not being 100% serious and we get stuck in a loop of endless recursion …

Oh dear

Yeah, good catch!
After a little research, it seems that if you try the subtraction operator on two strings in JS, it will first cast them to numbers and then perform the arithmetic. This still had the effect I wanted in my script, as this:

sidebar.className = sidebar.className - " fixed";

returned NaN which was then assigned to the sidebar as a class name, which worked, the but in spite of my code, rather than because of it.

It would have been better to write this:

sidebar.className = "";

I didn’t know about this. I’ll check it out. Thanks.