Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #33325

Re: How to fix a div at top scroll position?

Show all headers | View raw

Tuxedo  wrote:

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

You may need a CSS class such as:

.fixed {
  position: fixed;
  top: 0;
}

and JS code to add / remove that class, after comparing window.pageYOffset with the header's offsetHeight property.

I've posted an example at Codepen:
<http://codepen.io/jrio/pen/GWmMKN>

--
Joao Rodrigues

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

How to fix a div at top scroll position? Tuxedo <tuxedo@mailinator.com> - 2017-05-11 08:24 +0200
  Re: How to fix a div at top scroll position? Tuxedo <tuxedo@mailinator.com> - 2017-05-11 23:22 +0200
    Re: How to fix a div at top scroll position? Ram Tobolski <ramtob@gmail.com> - 2017-05-12 08:53 -0700
      Re: How to fix a div at top scroll position? Tuxedo <tuxedo@mailinator.com> - 2017-05-13 14:31 +0200
        Re: How to fix a div at top scroll position? Tuxedo <tuxedo@mailinator.com> - 2017-05-13 19:14 +0200
          Re: How to fix a div at top scroll position? Tim Streater <timstreater@greenbee.net> - 2017-05-13 18:25 +0100
            Re: How to fix a div at top scroll position? Tuxedo <tuxedo@mailinator.com> - 2017-05-14 00:09 +0200
              Re: How to fix a div at top scroll position? Ram Tobolski <ramtob@gmail.com> - 2017-05-14 04:28 -0700
          Re: How to fix a div at top scroll position? Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2017-05-16 06:17 -0700
            Re: How to fix a div at top scroll position? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2017-05-16 15:24 +0200
            Re: How to fix a div at top scroll position? Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2017-05-16 16:26 +0200
              Re: How to fix a div at top scroll position? Julio Di Egidio <julio@diegidio.name> - 2017-05-16 12:53 -0700
                Re: How to fix a div at top scroll position? Jon Ribbens <jon+usenet@unequivocal.eu> - 2017-05-17 00:06 +0000
                Re: How to fix a div at top scroll position? Julio Di Egidio <julio@diegidio.name> - 2017-05-16 17:49 -0700
                Re: How to fix a div at top scroll position? Jon Ribbens <jon+usenet@unequivocal.eu> - 2017-05-17 09:22 +0000
                Re: How to fix a div at top scroll position? Julio Di Egidio <julio@diegidio.name> - 2017-05-17 12:10 -0700
                Re: How to fix a div at top scroll position? Jon Ribbens <jon+usenet@unequivocal.eu> - 2017-05-18 12:53 +0000
                Re: How to fix a div at top scroll position? Julio Di Egidio <julio@diegidio.name> - 2017-05-18 13:30 -0700
            Re: How to fix a div at top scroll position? Julio Di Egidio <julio@diegidio.name> - 2017-05-16 12:52 -0700
  Re: How to fix a div at top scroll position? Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2017-05-15 13:57 -0700

csiph-web