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

Groups > comp.lang.javascript > #33272 > unrolled thread

How to fix a div at top scroll position?

Back to article view | Back to comp.lang.javascript

Contents

  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

#33272 — How to fix a div at top scroll position?

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

[toc] | [next] | [standalone]

#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

[toc] | [prev] | [next] | [standalone]

#33293

Hi.This can be done in css, with "position: sticky" (https://css-tricks.com/position-sticky-2/)

[toc] | [prev] | [next] | [standalone]

#33298

Ram Tobolski wrote:

> Hi.This can be done in css, with "position: sticky"
> (https://css-tricks.com/position-sticky-2/)

Thanks for the update. Sticky CSS is good! However, it's not working on my 
Android Chrome for some reason. It appears they introduced support and then 
removed it and then reintruduced it and maybe they removed once it again.

Tuxedo

[toc] | [prev] | [next] | [standalone]

#33305

Tuxedo wrote:

> Ram Tobolski wrote:
> 
>> Hi.This can be done in css, with "position: sticky"
>> (https://css-tricks.com/position-sticky-2/)
> 
> Thanks for the update. Sticky CSS is good! However, it's not working on my
> Android Chrome for some reason. It appears they introduced support and
> then removed it and then reintruduced it and maybe they removed it once
> again.

Correction: Sticky CSS works on Chrome. It was just the cache. It was not 
enough to simply reload the page. Instead, Chrome on Android must be 
restarted after changing the CSS file.

Tuxedo

[toc] | [prev] | [next] | [standalone]

#33306

In article <of7f46$v3q$1@solani.org>, Tuxedo <tuxedo@mailinator.com>
wrote:

>Tuxedo wrote:
>
>> Ram Tobolski wrote:
>> 
>>> Hi.This can be done in css, with "position: sticky"
>>> (https://css-tricks.com/position-sticky-2/)
>> 
>> Thanks for the update. Sticky CSS is good! However, it's not working on my
>> Android Chrome for some reason. It appears they introduced support and
>> then removed it and then reintruduced it and maybe they removed it once
>> again.
>
>Correction: Sticky CSS works on Chrome. It was just the cache. It was not 
>enough to simply reload the page. Instead, Chrome on Android must be 
>restarted after changing the CSS file.

Can't you just clear the cache?

-- 
"Once you adopt the unix paradigm, the variants cease to be a problem - you
bitch, of course, but that's because bitching is fun, unlike M$ OS's, where 
bitching is required to keep your head from exploding." - S Stremler in afc

[toc] | [prev] | [next] | [standalone]

#33309

Tim Streater wrote:

[...]

> Can't you just clear the cache?

Thanks for pointing out the obvious. I now found where I can indeed clear 
the cache but for all apps at once. I'm not sure where to clear the cache 
for Chrome alone in Android's interface. I'm not an expert with this device.

Tuxedo

[toc] | [prev] | [next] | [standalone]

#33316

>I'm not sure where to clear the cache 
for Chrome alone in Android's interface

Yes, it's a bit hidden :)

From Chrome:
open app menu
scroll to bottom
settings
privacy
clear browsing data

[toc] | [prev] | [next] | [standalone]

#33326

Tuxedo  wrote:

<snip>

> Correction: Sticky CSS works on Chrome. It was just the cache. It was not 
> enough to simply reload the page. Instead, Chrome on Android must be 
> restarted after changing the CSS file.

In order to avoid this problem, I usually put a date-time stamp after my css file name, whenever I update the css file, e.g.

<link href="style.css?v=201705142125' type="text/css" rel="stylesheet">

--
Joao Rodrigues

[toc] | [prev] | [next] | [standalone]

#33327

Joao Rodrigues <groups_jr-1@yahoo.com.br> wrote on 16 May 2017 in
comp.lang.javascript: 

>> Correction: Sticky CSS works on Chrome. It was just the cache. It was
>> not enough to simply reload the page. Instead, Chrome on Android must
>> be restarted after changing the CSS file.
> 
> In order to avoid this problem, I usually put a date-time stamp after my
> css file name, whenever I update the css file, e.g. 
> 
> <link href="style.css?v=201705142125' type="text/css" rel="stylesheet">

To avoid having to bother with this, 
I use in-html stylesheets, or use css-files as serverside includes.

They [mine!] are not that massive to warrant bandwith-concerns.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#33328

On 16/05/2017 15:17, Joao Rodrigues wrote:
> Tuxedo  wrote:
>
> <snip>
>
>> Correction: Sticky CSS works on Chrome. It was just the cache. It was not
>> enough to simply reload the page. Instead, Chrome on Android must be
>> restarted after changing the CSS file.
>
> In order to avoid this problem, I usually put a date-time stamp after my css file name, whenever I update the css file, e.g.
>
> <link href="style.css?v=201705142125' type="text/css" rel="stylesheet">

I'd rather go with versioning path, .e.g /769/css/style.css

I don't recall exactly, but I think it was related to IE and also that 
some Proxies may remove query parameters.

-- 
Cezary Tomczyk
https://www.aslint.org/ - Accessibility validation tool

[toc] | [prev] | [next] | [standalone]

#33330

On Tuesday, May 16, 2017 at 4:26:49 PM UTC+2, Cezary Tomczyk wrote:

> I'd rather go with versioning path, .e.g /769/css/style.css
> 
> I don't recall exactly, but I think it was related to IE and also that 
> some Proxies may remove query parameters.

Nonsense.

Julio

[toc] | [prev] | [next] | [standalone]

#33331

On 2017-05-16, Julio Di Egidio <julio@diegidio.name> wrote:
> On Tuesday, May 16, 2017 at 4:26:49 PM UTC+2, Cezary Tomczyk wrote:
>> I'd rather go with versioning path, .e.g /769/css/style.css
>> 
>> I don't recall exactly, but I think it was related to IE and also that 
>> some Proxies may remove query parameters.
>
> Nonsense.

Obviously, proxies removing query parameters seems rather unlikely,
but Cezary may be half-remembering the fact that Squid proxy used to
refuse to cache any URL containing a '?'.

If I'm understanding their rather poor documentation, Squid will
still refuse to cache URLs with query parameters unless they were
served with an explicit Expires: or Cache-Control: max-age header.

http://wiki.squid-cache.org/ConfigExamples/DynamicContent

[toc] | [prev] | [next] | [standalone]

#33332

On Wednesday, May 17, 2017 at 2:09:35 AM UTC+2, Jon Ribbens wrote:
> On 2017-05-16, Julio Di Egidio <julio@diegidio.name> wrote:
> > On Tuesday, May 16, 2017 at 4:26:49 PM UTC+2, Cezary Tomczyk wrote:
> >> I'd rather go with versioning path, .e.g /769/css/style.css
> >> 
> >> I don't recall exactly, but I think it was related to IE and also that 
> >> some Proxies may remove query parameters.
> >
> > Nonsense.
> 
> Obviously, proxies removing query parameters seems rather unlikely,
> but Cezary may be half-remembering the fact that Squid proxy used to
> refuse to cache any URL containing a '?'.
> 
> If I'm understanding their rather poor documentation, Squid will
> still refuse to cache URLs with query parameters unless they were
> served with an explicit Expires: or Cache-Control: max-age header.
> 
> http://wiki.squid-cache.org/ConfigExamples/DynamicContent

Yes, but that *solves* any cache problem, for how too drastically.

Julio

[toc] | [prev] | [next] | [standalone]

#33333

On 2017-05-17, Julio Di Egidio <julio@diegidio.name> wrote:
> On Wednesday, May 17, 2017 at 2:09:35 AM UTC+2, Jon Ribbens wrote:
>> On 2017-05-16, Julio Di Egidio <julio@diegidio.name> wrote:
>> > On Tuesday, May 16, 2017 at 4:26:49 PM UTC+2, Cezary Tomczyk wrote:
>> >> I'd rather go with versioning path, .e.g /769/css/style.css
>> >> 
>> >> I don't recall exactly, but I think it was related to IE and also that 
>> >> some Proxies may remove query parameters.
>> >
>> > Nonsense.
>> 
>> Obviously, proxies removing query parameters seems rather unlikely,
>> but Cezary may be half-remembering the fact that Squid proxy used to
>> refuse to cache any URL containing a '?'.
>> 
>> If I'm understanding their rather poor documentation, Squid will
>> still refuse to cache URLs with query parameters unless they were
>> served with an explicit Expires: or Cache-Control: max-age header.
>> 
>> http://wiki.squid-cache.org/ConfigExamples/DynamicContent
>
> Yes, but that *solves* any cache problem, for how too drastically.

I'm not sure what the last part of your sentence means there exactly,
but my point was that (a) Squid used to never cache URLs with query
strings, even if the cacheing headers told it it should, and (b) even
now, Squid treats URLs with query strings as "second class citizens"
that (in the absence of explicit instructions) it will not cache, as
opposed to other URLs that it will assume are cacheable.

[toc] | [prev] | [next] | [standalone]

#33339

On Wednesday, May 17, 2017 at 11:25:55 AM UTC+2, Jon Ribbens wrote:
> On 2017-05-17, Julio Di Egidio <julio@diegidio.name> wrote:
> > On Wednesday, May 17, 2017 at 2:09:35 AM UTC+2, Jon Ribbens wrote:
> >> On 2017-05-16, Julio Di Egidio <julio@diegidio.name> wrote:
> >> > On Tuesday, May 16, 2017 at 4:26:49 PM UTC+2, Cezary Tomczyk wrote:
> >> >> I'd rather go with versioning path, .e.g /769/css/style.css
> >> >> 
> >> >> I don't recall exactly, but I think it was related to IE and also that 
> >> >> some Proxies may remove query parameters.
> >> >
> >> > Nonsense.
> >> 
> >> Obviously, proxies removing query parameters seems rather unlikely,
> >> but Cezary may be half-remembering the fact that Squid proxy used to
> >> refuse to cache any URL containing a '?'.
> >> 
> >> If I'm understanding their rather poor documentation, Squid will
> >> still refuse to cache URLs with query parameters unless they were
> >> served with an explicit Expires: or Cache-Control: max-age header.
> >> 
> >> http://wiki.squid-cache.org/ConfigExamples/DynamicContent
> >
> > Yes, but that *solves* any cache problem, for how too drastically.
> 
> I'm not sure what the last part of your sentence means there exactly,

So, you cannot even follow but jumped in to defend the indefensible...

1) A proxy that does NOT cache resources under urls with parameters does
SOLVE the problem we were talking about before it even happens: as well as it should be clear enough that it is the most DRASTIC solution, it is
equivalent to just disable caching for those resources.

2) The suggested "versioning path" is in fact twice a piece of nonsense:
not only it comes from fake motivations, if it can do anything at all,
that is to rather RECOVER caching from a proxy that behaves as above.

3) Yet the fault must be IE...

I hope that clarifies it for you: the incident is already closed anyway.

Julio

[toc] | [prev] | [next] | [standalone]

#33343

On 2017-05-17, Julio Di Egidio <julio@diegidio.name> wrote:
> On Wednesday, May 17, 2017 at 11:25:55 AM UTC+2, Jon Ribbens wrote:
>> I'm not sure what the last part of your sentence means there exactly,
>
> So, you cannot even follow but jumped in to defend the indefensible...

[gibberish snipped]

*plonk*

[toc] | [prev] | [next] | [standalone]

#33347

On Thursday, May 18, 2017 at 2:56:47 PM UTC+2, Jon Ribbens wrote:
> On 2017-05-17, Julio Di Egidio <julio@diegidio.name> wrote:
> > On Wednesday, May 17, 2017 at 11:25:55 AM UTC+2, Jon Ribbens wrote:
> >> I'm not sure what the last part of your sentence means there exactly,
> >
> > So, you cannot even follow but jumped in to defend the indefensible...
> 
> [gibberish snipped]
> 
> *plonk*

LOL, suck my socks, liar and of course terminal idiot.

Julio

[toc] | [prev] | [next] | [standalone]

#33329

On Tuesday, May 16, 2017 at 3:17:50 PM UTC+2, Joao Rodrigues wrote:
> Tuxedo  wrote:
> <snip>
> > Correction: Sticky CSS works on Chrome. It was just the cache. It was not 
> > enough to simply reload the page. Instead, Chrome on Android must be 
> > restarted after changing the CSS file.
> 
> In order to avoid this problem, I usually put a date-time stamp after my css file name, whenever I update the css file, e.g.
> 
> <link href="style.css?v=201705142125' type="text/css" rel="stylesheet">

It is "a problem" only if it is a problem, otherwise it's not a problem:
it's caching and then dealing with it a development/deployment time...

Julio

[toc] | [prev] | [next] | [standalone]

#33325

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web