Dynamic header bar - with shadow, what code is this?

ImagesAndWords

StayblCam.com
Nov 7, 2006
2,326
90
0
Scottsdale, Arizona
www.stayblcam.com
Hai guyz...
While reading Norwegian news sites, I came across this new design by Aftenposten.no. Notice how when you scroll down, a top navigation bar pops in and floats at the top with a nice shadow underneath it.

Any coders here reckognizing how this is done? I imagine it's a javascript of some kind. Links to a script/code that will do this = +Rep ;)

Thanks!!
 


Basically, all they are doing is inserting an element to the DOM after the page has loaded and the listener determines that the browser has been scrolled away from x-amount at the top. It's not really that hard to accomplish and I wouldn't doubt that there's a jQuery library for it to help make the code cross-browser compatible.

Their code:

HTML:
<nav class="smallHeader" id="smallHeader" style="display: block;"><div class="span12" id="innerSmallHeader"><a href="http://www.aftenposten.no/" class="floatLeft logo"><img alt="" src="http://www.aftenposten.no/skins/global/gfx/ap_logo_small.png"></a><nav class="widget topMenu standardMenu gridUnit topMainMenu floatLeft" data-widget-view="widgets.topMenu.standardMenu">
<ul class="clearfix">
<li class="">
<a target="_top" href="http://www.aftenposten.no/nyheter/uriks/" class="">
Verden
</a>
</li>
<li class=" activeSection">
<a target="_top" href="http://www.aftenposten.no/norge/" class="">
Norge
</a>
</li>
<li class="">
<a target="_top" href="http://www.oslopuls.no" class="">
Oslopuls
</a>
</li>
<li class="">
<a target="_top" href="http://www.aftenposten.no/okonomi/" class="">
Økonomi
</a>
</li>
<li class="">
<a target="_top" href="http://www.aftenposten.no/kultur/" class="">
Kultur
</a>
</li>
<li class="">
<a target="_top" href="http://www.aftenposten.no/meninger/" class="">
Meninger
</a>
</li>
<li class="">
<a target="_top" href="http://www.aftenposten.no/nytte/" class="">
Nytte
</a>
</li>
<li class="">
<a target="_top" href="http://www.aftenposten.no/nyheter/sport/" class="">
Sport
</a>
</li>
<li class="">
<a target="_top" href="http://www.aftenposten.no/sitemap/" class="">
A-Å
</a>
</li>
</ul>
</nav></div></nav>
Code:
mno.core.register({id:"widget.topMenu.standardMenu",creator:function(c){var e=c.$; function b(){var n=window.jQuery;var j='<nav id="smallHeader" class="smallHeader"><div id="innerSmallHeader" class="span12">',g=n(".topMainMenu").clone(true).addClass("floatLeft").removeClass("gridRow span7"),h=n("#header .search form").clone(true),l,k; mno.features.positionFixed(function(q){var o=window.jQuery("#header"),s=false; k=q;h.addClass("floatRight");j+='<a class="floatLeft logo" href="'+c.publication.url+'"><img src="'+c.publication.url+"skins/global/gfx/"+c.publication.name+'_logo_small.png" alt =""/></a>'; j+="</div></nav>";if(typeof mno.core.utils!=="undefined"&&typeof mno.core.utils.innerShiv==="function"){l=n(mno.core.utils.innerShiv(j,false)); }else{l=n(j);}var r=l.find("#innerSmallHeader");r.append(g);r.append(h); n("body").append(l);l.hide();if(k===true){c.listen({scrollmove:function(t){if(t.y>(o.height()+o.offset().top)){if(s===false){l.show(); s=true;}}else{if(s===true){l.hide();s=false;}}}});}});}function a(){var g=[mno.publication.url]; c.container.find("> ul > li > a").each(function(){g.push(e(this).attr("href")); });var j=mno.utils.params.getPath();var h=window.jQuery.inArray(j,g);if(h!==-1){g.rotate(h); c.listen({gesture:function(l){var k;if(l.horizontal==="left"){k=g.pop(); }else{if(l.horizontal==="right"){if(g[1]){k=g[1];}}}if(k!==undefined&&k!==j){window.location.href=k; }}});}}function f(){c.container.find('[href="/indeks"]').live("click",function(g){c.requireWidget("widget.siteIndex.default"); g.preventDefault();});b();a();}function d(){e=null;}return{init:f,destroy:d}; }});
 
  • Like
Reactions: ImagesAndWords