CSS help- NOT just SMF centric- position:sticky

[drewactual]

Howdy, folks.

I have been frustrated in the attempt to get an ad space to become 'static' after an event/location.  I refuse to use js to do this as it renders the browser jerky. 

if you want to see what i'm talking about, take a peak at my page (in sig) from a desktop (it's formatted differently under 1024px wide) and it's on the right side with a header 'amazon'. 

I used a position:sticky in the css to staple this to the page and for the reasons of extended threads.  It keeps one of my primary monetary sources visible.  It works, don't get me wrong, but the position is impacted by the divisions above it... these divisions include feeds from the 'wordpress side of the site' and which include images.  these images have a somewhat consistent height but not always. 

setting the position where the division 'locks' is currently at -120vh (negative 120 view height)...  this form of measure and value seems to give me the best consistency- but.... there has to be a way to get it to lock consistently in the precise same place without using pixels (which doesn't really work either) and which fills the majority of that space...

how would some of you experts tackle this?  Please don't say js... I really want to stay away from that if at all possible.

[Mick.]

Something like this? https://www.idesignsmf.com/index.php/page,page3392.html

[drewactual]

yup. just like that. 

however, that is simple to do when working with absolute or clearly defined stacks above the sticky area... trying or attempting to do so when the above area 'is not precisely' defined in terms of height is what is killing me. 

don't get me wrong, how it is set up now 'works', but it doesn't work as well as i want it to... there has got to be something i'm missing.

[Mick.]

yup. just like that. 

however, that is simple to do when working with absolute or clearly defined stacks above the sticky area... trying or attempting to do so when the above area 'is not precisely' defined in terms of height is what is killing me. 

don't get me wrong, how it is set up now 'works', but it doesn't work as well as i want it to... there has got to be something i'm missing.

Take another look... I just added several blocks on top of it.   https://www.idesignsmf.com/index.php/page,page3392.html

[drewactual]

looks 'good enough', but there is a decided 'jump' and then an overlap of the divs after that jump.. is this purely css you're using?

i had a similar arrangement but because of backgrounds i was using at the time it was not something i was going to send 'live' on the site.

[drewactual]

hold up...

sticky_sidebar.fixed..... this is new to me if it is purely css driven... i was unaware of discerning 'fixed' and giving it rules!

ah- it is js event driven... that's what i want to stay away from not only because of the jerky thing but because of conflicting js- i have a ton of it already cooking on that site and serve the majority of it in a minified file using h2 push...

[Mick.]

looks 'good enough', but there is a decided 'jump' and then an overlap of the divs after that jump.. is this purely css you're using?

i had a similar arrangement but because of backgrounds i was using at the time it was not something i was going to send 'live' on the site.

It has a jump yes in Chrome. I think on Safari it was fine. Now, this uses js script, very little and quite frankly the ones i've searched use js. Using CSS only would be a guessing game i think. I used this for a while, I thought it was cool but it annoyed me after while. It would jump other blocks and it would appear on mobile when specifcly had it to display: none.

anyways,..... check this pen, it uses a sticky sidebar using css only... https://codepen.io/nikola-kuz/pen/gBmNMe

[drewactual]

thank you, Sir- will check it out.

aye- the issue i may have created is the main #div is sticky, not just the .div, and that expansion above the part i want sticky isn't well defined in terms of height...

i'll play with it later and make the other part sticky alone...

[drewactual]

some would say i 'nailed' it, but no... as it is i 'stuck' it.

I'm no master, but i've got a pretty decent grasp on both HTML and CSS- but this one worked me over, and as usual- it wasn't something near as complicated as i was making it.  it was rather DUMB, actually.  dumbactual... my new screen name. 

so...

I've a sidebar titled "sitefund" which dominates the right column of my forum (and page- i matched up WP and SMF)... the sidebar 'stuck' using position:sticky, but not where i wanted it to... because (wait for it) what i was trying to stick using negative values was the ENTIRE sidebar (div#sitefund).... so, I broke it out.  div.stuucky is now matched in form to div#sitefund in width and float, and set to stick @45px... boom.. no herky jerky motion like every js file i've ever seen or wrote does, and a perfect landing.

i'm diggin' it. 

and..... along the way, i found a really nice little web function handed over by the good people @ "tormus.com"... at
http://www.tormus.com/tools/div_checker#show_div_map
specifically.....

a div checker.  checks open divs against closed divs really fast- no more using fingers and scanning code... dang, i'm dumb.. dummbactual... how about that? never thought to look for such a thing until tonight.  it helped me track down and extra div close on a included file i've used for a long time.  go figure. 

happy coding, y'all....