If anyone could tell me how this website is achieving the disappearing of the logo once the user starts to scroll that would be much appreciated! If you look at the logo in the upper left, once you start to scroll it disappears. What technique is this called? Is this done with javascript?

/

Thanks in advance!

If anyone could tell me how this website is achieving the disappearing of the logo once the user starts to scroll that would be much appreciated! If you look at the logo in the upper left, once you start to scroll it disappears. What technique is this called? Is this done with javascript?

http://www.studionudge./

Thanks in advance!

• javascript
• html
• css

Share Improve this question Follow asked May 15, 2012 at 16:26 YoungGuyYoungGuy 30322 gold badges88 silver badges1515 bronze badges 1

• Scroll slowly down. The logo doesn't simply disappear, it just moves up past the top of the screen, just like most of the rest of the content. – Kendall Frey Commented May 15, 2012 at 16:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can simple do by css property fixed.

Eample :

<div id="main">
  Test Content
</div>

<div id="content">
  Add some more content here for result.
</div>

<style type="text/css">
  #main {
    width: 100%;
    height: 60px;
    background: green;
    position: fixed;
    z-index: 1000; /* Z-Index for making this div always on top */
  }

  #content {
    width: 960px; margin:0 auto; position: relative; background: blue;
  }

</style>

No. The logo is placed inside a "normal" container, that scroll with the rest of the page; the menu is instead in a "fixed" one, that does not scroll. Plus, a trick is used to display logo on top of the menu and website content behind it. Very nice effect, I've never seen before.

Basic HTML/CSS code and working example: http://jsfiddle/cs7Nk/ :-)

I believe what is happening, is the header has the property background-attachment set to scroll.

The logo isn't part of the header (it just sits on top with z-index) so it doesn't get the scrolling effect.