SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    the new Yahoo page.....

    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...

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by maya90 View Post
    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...;-)
    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()
    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.

    Quote Originally Posted by maya90 View Post
    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?
    This is known as parallax scrolling.
    Here's someone asking the same question: http://stackoverflow.com/questions/1...ebar-scrolling

    HTH

  3. #3
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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 here, I did....


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

    but it's being ignored.... :-(

    thank you...

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code JavaScript:
    $(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.

  5. #5
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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...


  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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?

  7. #7
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    hmmm.... this is my code:

    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...

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Try this:

    Code JavaScript:
    $(document).ready(function() {
      setTimeout(function() { 
        $(window).scrollTop(0); 
      }, 150);
     
      $(window).scroll(function(){
        if ($(document).scrollTop() > 70){
          $("#header").addClass("headerScroll");
        } else {
          $("#header").removeClass("headerScroll");
        }
      });
    });

  9. #9
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    once again, that worked!! :-)

    thank you very much...

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Happy to help
    I'm just working on recreating the second effect you mentioned.
    I'll post back when I'm done.

  11. #11
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    awesome!!! :-)) can't wait to see it......

    thanks again.....

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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...scrolling.html

    Hope that helps.

  13. #13
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    930
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    The Yahoo page doesn't use jQuery
    Good to know not everyone lost their sanity .

    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 .

  14. #14
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you... it's awesome.....

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

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Lemon Juice View Post
    Good to know not everyone lost their sanity
    Haters gonna hate ...

    Quote Originally Posted by Zitronensaft
    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 .
    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

    Code 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".

  16. #16
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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...

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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/dr...-web-browsers/

  18. #18
    SitePoint Guru bronze trophy
    Join Date
    Dec 2003
    Location
    Poland
    Posts
    930
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Haters gonna hate ...
    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...

    Quote Originally Posted by Pullo View Post
    I would hate that to be all you take away from this thread @Lemon Juice ;
    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.

    Quote Originally Posted by Pullo View Post
    So, here's the equivalent function in plain ol' JavaScript

    Code JavaScript:
          sidebar.className = sidebar.className - " fixed";
    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...

    Quote Originally Posted by Pullo View Post
    You can achieve drop shadow in IE 8 using -ms-filter
    Here's an article explaining how: http://robertnyman.com/2010/03/16/dr...-web-browsers/
    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!

  19. #19
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you Pullo!!!

    will certainly try this...

  20. #20
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Lemon Juice View Post
    BTW, I used a smiley after my sentence to indicate I wasn't 100% serious!
    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

    Quote Originally Posted by Lemon Juice View Post
    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...
    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:

    Code JavaScript:
    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:
    Code JavaScript:
    sidebar.className = "";

    Quote Originally Posted by Lemon Juice View Post
    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!
    I didn't know about this. I'll check it out. Thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •