/    Sign up×
Community /Pin to ProfileBookmark

Viewport alignment

Copy linkTweet thisAlerts:
May 31.2006

How do I get this floating menu to align even with the top of the window when scrolled down? It starts off great, evenly aligned with the banner, but then it keeps THAT same distance from the top of the view port instead of sliding into place at the very top of the viewport (when scrolled down or back up until reaches the banner position).

[url]http://www.enhancedwireless.net/Technology/keyMech.shtml[/url]

Looking for this kind of floating menu behavior (scroll down.)

[url]http://fujifilm.com/support/tips_for_better_photos/film-digital/digital.html[/url]

I may add I’m a newbie to web design, so any detailed help is appreciated.

Thanks
KB

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceMay 31.2006 — Learn:
// Browser Checker
function browserCheck(){
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera6=((this.agent.indexOf("Opera 6")>-1) && this.dom)?1:0;
this.ie5=((this.ver.indexOf("MSIE 5")>-1) && this.dom && !this.opera6)?1:0;
this.ie6r=((this.ver.indexOf("MSIE 6")>-1) && this.dom && (document.compatMode == "BackCompat"))?1:0;
this.ie6s=((this.ver.indexOf("MSIE 6")>-1) && this.dom && (document.compatMode == "CSS1Compat"))?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ie=(this.ie4||this.ie5||this.ie6r||this.ie6s)?1:0;
this.mac=(this.agent.indexOf("Mac")>-1)?1:0;
this.ns6=(this.dom && (parseInt(this.ver) >= 5)) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.ns=(this.ns4||this.ns6)?1:0;
this.bw5=(this.ie5||this.ie6r)?1:0;
this.bw6=(this.ie6s||this.ns6||this.opera6)?1:0;
this.bw=(this.ie6r||this.ie6s||this.ie5||this.ns6||this.opera6)?1:0;
return this;
}

// Global Variables
var ENMarginTop, ENMarginBottom, ENTop;
var ENDivName, ENObject, ENCurrentY;

function ENInit(id, mt, mb, tp) // DIVid, margin-top, margin-bottom, position-top,
{
bw=new browserCheck;
if (bw.bw) {
ENDivName = bw.bw5 ? document.all(id) : bw.bw6 ? document.getElementById(id) : 0;
ENObject = ENDivName.style;
ENObject.position = 'absolute';
ENMarginTop = mt ? mt : 0;
ENMarginBottom = mb ? mb : 0;
ENCurrentY = ENTop = tp ? tp : ENDivName.offsetTop;
ENSmoothMove();
}
}

function ENSmoothMove()
{
var winh = bw.ie6s ? document.documentElement.clientHeight : (bw.ns6||bw.opera6) ? innerHeight : bw.bw5 ? document.body.clientHeight : 0 ;
var yt = bw.ie6s ? document.documentElement.scrollTop : bw.bw5 ? document.body.scrollTop : (bw.ns6||bw.opera6) ? window.pageYOffset : 0;
var divh = ENDivName.offsetHeight;

<i> </i>if (winh &gt;= ENMarginTop + divh + ENMarginBottom) {
<i> </i> yt = Math.max(yt + ENMarginTop, ENTop);
<i> </i>} else {
<i> </i> var yt1 = Math.max(yt + ENMarginTop, ENTop);
<i> </i> var f1 = (yt1 &gt; ENCurrentY) ? 1 : 0;
<i> </i> var yt2 = yt - (divh + ENMarginBottom - winh);
<i> </i> yt2 = Math.max(yt2, ENTop);
<i> </i> var f2 = (yt2 &lt; ENCurrentY) ? 1 : 0;
<i> </i> if (f1 &amp;&amp; f2) yt = ENCurrentY;
<i> </i> else yt = f2 ? Math.max(yt1, yt2) : Math.min(yt1, yt2);
<i> </i>}

<i> </i>if (yt != ENCurrentY) {
<i> </i> var vy = (yt - ENCurrentY) * 0.25;
<i> </i> if (Math.abs(vy) &lt; 1) vy = (vy &gt; 0) ? 1 : (vy &lt; 0) ? -1 : 0;
<i> </i> ENCurrentY += Math.round(vy);
<i> </i> ENObject.top = ENCurrentY + 'px';
<i> </i>}
<i> </i>setTimeout('ENSmoothMove()', 20);
}

window.onLoad = function() { ENInit('elevnavi2',0,0); return true; };
Copy linkTweet thisAlerts:
@KbeeauthorMay 31.2006 — Thanks for the code and advice - What section of that web site code js is pertinent for the kind of move I'm trying to fine tune? Having read the Fuji site's terms of use and common sense kicking in, I'm not going to just copy this script from the site...I know no one was suggesting that anyway...so any help in modifying my page as it is already would be appreciated. I actually have a persistent layer js on my page but don't know how to amend it or what to add to get it to do this behavior.

KB
Copy linkTweet thisAlerts:
@KbeeauthorMay 31.2006 — Any thoughts?
Copy linkTweet thisAlerts:
@phpnoviceJun 01.2006 — That's the point. You would need to study that code and figure out how it does what it does (then write your own). The ENInit function you don't really need to look at (except for name references) -- because all it does is to set up the positioned layer. It is the ENSmoothMove function that actually makes it float.
Copy linkTweet thisAlerts:
@KbeeauthorJun 01.2006 — Thanks for the clarification...so am I looking for code to put inside my present persistent layer code in the header on my html page, and are you're saying to look at the ENSmoothMove function to do that? Alter bits and pieces of that function to suit?

Thanks

KB
Copy linkTweet thisAlerts:
@phpnoviceJun 01.2006 — Primarly, yes. But you'll need the other info as a reference as to what certain things mean in that function. ?
×

Success!

Help @Kbee spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...