Path: csiph.com!weretis.net!feeder4.news.weretis.net!feeder5.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: Tuxedo <tuxedo@mailinator.com>
Newsgroups: comp.lang.javascript
Subject: Re: How to fix a div at top scroll position?
Date: Thu, 11 May 2017 23:22:29 +0200
Organization: solani.org
Lines: 28
Message-ID: <of2ksb$3ti$1@solani.org>
References: <of1096$uco$1@solani.org>
Mime-Version: 1.0
Content-Type: text/plain; charset="ISO-8859-1"
Content-Transfer-Encoding: 7Bit
X-Trace: solani.org 1494537931 4018 eJwNzIEBBDEEBMCWEBblvI30X8JfATNxoGA6Ah4v3uo8FmfpMipCaNlx5ixodWndnSFdoWGHt+rXH9ZyAaJa+qYrR77B3IMPuNu7p3U1/3loHVE= (11 May 2017 21:25:31 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Thu, 11 May 2017 21:25:31 +0000 (UTC)
User-Agent: KNode/4.10.5
Cancel-Lock: sha1:weBi5Ev6rxXp+8Xavl1bwDDtK84=
X-NNTP-Posting-Host: eJwNxMkBAzEIA8CWuITscoA1/ZeQzGPgqTmMRAYW69A6weuGbvOxFaub+dY3WqPtg7zbM3hKbaZsol4YxDjBOMa+4oeFEjpjjuLkv/LPflf7HJ0=
X-User-ID: eJwFwYEBACAEBMCVFD7Goc/+I3TnioV7DA7z8dlWghG9tmuqkmSYP2uAjZdHdGlGJKST4AchFBEN
Xref: csiph.com comp.lang.javascript:33283

Tuxedo wrote:

> Hello,
> 
> What methods are usually used for a typical top menu bar (div) to stay in
> fixed position and in constact view once its top edge hits the browser
> ceiling viewport, so that the div thereafter overlaps the remaining page
> contents when scrolled further down?
> 
> Initially, the div is not in the topmost part of a page, but follows a
> visual image header.
> 
> Maybe this isn't specifically a JS question, maybe CSS is all that's
> needed. If it's a JS question, how is it done?
> 
> Many thanks,
> Tuxedo

While I guess there are other ways, this solution works:

window.onscroll = function() {  
document.getElementById("sticky").style.position="fixed";
document.getElementById("sticky").style.top="0px";
}

And if scrollY is less than some value, set the styles back.

Tuxedo