Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Jan 07 03:10
    @bjorno43 banned @doctor-sam
  • Aug 17 2019 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 2019 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 2019 17:13
    @mstellaluna banned @cmal
  • Jan 08 2019 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
newmoon
@newmoon
No way to have it stick to the bottom right of the page after a specific element becomes visible. It can stick inside that element though, once it becomes visible and we scroll past. As we scroll past, however, it will keep stuck to that element as it moves up the screen.
It's a few lines of code I think with JS - nothing too complicated in case that's a concern with using jQuery or JavaScript to achieve this functionality.
Donnie
@Donnie-D

@newmoon :confounded: sorry i am a little confused regarding your explanation. They seem to be two conflicting statements. You said No way to have it stick to the bottom right of the page after a specific element becomes visible . And then you said that It can stick inside that element though, once it becomes visible and we scroll past. Do you mean once that element becomes visible, then this div can stick inside that element? because what your second statement implies is sort of something I am after. That may be I can put my sticky div inside another div(lets call the outer div 'outer-one'). The outer-one can be somewhere well down the page when the page loads. Now when I scroll down and reach the outer-one, the sticky div inside the outer-one becomes visible.

Obviously I am wrong somewhere because its not working when I try this, which leads to make me think that sticky perhaps only works from top of the page. i.e., when the page loads, we can have an element as sticky in the viewport in the initial view. This element would stick to its offsets for the rest of the time we are in that container. If there is another sticky with the same offsets in the next container then that would replace the previous sticky element.

To sum this issue up, in my findings so far, there is no way using HTML and CSS only that we could position an element somewhere down the page and not visible yet but upon scrolling down and away from the top of the page that element becomes visible and stuck to a certain point in the page. (sorry for writing a long winded detail, just want to clear things)

newmoon
@newmoon
@Donnie-D Long story short - you need javascript to do what you are attempting. position: sticky will only apply to an element's parent container, so you can't use position: sticky to stick something to the bottom of the window after scrolling down a bit on the page.
I think if you create a codepen and play around with it some more, it will become more apparent
Donnie
@Donnie-D
been doing this for last 3 hours. been reading as well but still unable to find an answer in a nutshell
https://codepen.io/Donnie-D/pen/xJNYKK?editors=1100
did it on a few different online editors because sometimes they all have their own technical problems going on so one cannot be sure whether its the code or the editor messing about
@newmoon but thanks for showing interest to this case. Appreciated!
newmoon
@newmoon
@Donnie-D In that codepen, you have the arrow stuck to the bottom of the section it is in. Move the arrow so the <main> element has the arrow, and it will be stuck to the bottom of your <main> element. Now, have something above your <main> element that is more than 100vh tall, and your arrow will be out of sight until <main> is scrolled into view.
That should explain how position: sticky and parent elements work
Christopher McCormack
@cmccormack
@newmoon that's pretty cool, so it's not top or bottom but just contained within the element and viewport
newmoon
@newmoon
@cmccormack yes, contained within the element. We could move the arrow div up to the top of <main> and change the css from bottom: 20px to top: 20px to have it sticky to the top instead.
Pretty cool feature - not supported still on mobile though I think
Scratch that, looks like mobile is in with some caveats for sticky headers in tables: https://caniuse.com/#feat=css-sticky
Christopher McCormack
@cmccormack
I like the feature, the examples w3c use are great, sticky section headers are great
it can easily build breadcrumbs of sorts as well
Jesse
@ki4jgt

Hey guys, I have a problem:
I need to make the rest of a site's pages look like this: http://jakewakefieldtarot.com/blog/

So, I've been fiddling around with this stupid navbar all night, trying to evenly space the td elements within a table: https://codepen.io/ki4jgt/pen/vaowRG

I tried table-layout: fixed; but it's not working. All the td elements are left-aligned. What am I doing wrong?

Rogério Dalot
@Dalot
Hey @ki4jgt
Jesse
@ki4jgt
@Dalot Yeah?
Hey.
Rogério Dalot
@Dalot
Try to apply a class to tr and then to this class you apply a display flex
Plus justify-content:center
Jesse
@ki4jgt
That's not working either.
Rogério Dalot
@Dalot
oh sorry
remove the class
Jesse
@ki4jgt
@Dalot Nothing to be sorry about. Just did. Thanks for your help.
Rogério Dalot
@Dalot
and apply those properties to navbar
Jesse
@ki4jgt
@Dalot That just centers the cells within the table. It doesn't make them equal width.
Rogério Dalot
@Dalot
oh okay
wait a second
Jesse
@ki4jgt
I think Bootstrap is messing with the code in some way but I'll wait.
Rogério Dalot
@Dalot
oh you are using bootstrap
yes
Jesse
@ki4jgt
Yes.
Rogério Dalot
@Dalot
the best way to do this, if you want to keep bootstrap is just to search for their documentation
they surely have a class
to properly space out these guys
Jesse
@ki4jgt
I've searched Google and everything. If there is, my Google-fu is horrid.
look at the third example
It might be what you are looking for
Rogério Dalot
@Dalot
is that what you were looking for @ki4jgt
?
Jesse
@ki4jgt
Completely. Thank you. What all did you do?
I'll read your code and find thank you though.
Rogério Dalot
@Dalot
I just followed the bootstrap docs
And I kind erased what you had was just being overwritten of overriding bootstrap
or overriding*