MouseOver Object overlaps fixed Object

Hello,
I tried various options to solve my issue, but was not successful.

The set-up:
I have a nav bar which is a fixed object. Further down on the side I have several objects (e.g.pictures) with an mouse-over animation (mouse over appears Text and backgroundcolor over the picture)
Issue: When the mouse-over object is activated (= cursor is on the mouse-over object so that this level appears) then the mouse-over object is always on-top of the fixed nav-bar.
Target: Like the mouse-off picture, also the mouse-over object should "walk" beneath the fixed nav-bar when scrolling down.

Not so easy to explain I guess, this is why I did attach a picture, hoping it helps to understand.
Szenario1 = Mouse-Off
Szenarion2 = Mouse-Over

Regards,
HK

Attachment 130936

Quote:

---

Originally Posted by ich

Hello,
I tried various options to solve my issue, but was not successful.

The set-up:
I have a nav bar which is a fixed object. Further down on the side I have several objects (e.g.pictures) with an mouse-over animation (mouse over appears Text and backgroundcolor over the picture)
Issue: When the mouse-over object is activated (= cursor is on the mouse-over object so that this level appears) then the mouse-over object is always on-top of the fixed nav-bar.
Target: Like the mouse-off picture, also the mouse-over object should "walk" beneath the fixed nav-bar when scrolling down.

Not so easy to explain I guess, this is why I did attach a picture, hoping it helps to understand.
Szenario1 = Mouse-Off
Szenarion2 = Mouse-Over

Regards,
HK

Attachment 130936

---

HK,

Set you purple bar and any objects on it to be 'Sticky' and everything will 'walk' beneath it.

Attachment 130937

Gary

Quote:

---

Originally Posted by Initiostar

HK,

Set you purple bar and any objects on it to be 'Sticky' and everything will 'walk' beneath it.

Gary

---

Hi Gary,
thanks for taking care.

The solution you propose works fine when one want to fix an object in place.
But my target is to fix the object only (!) once it hits the screen top-edge, while scrolling.
Typically for Nav-Bars.
This is the reason why the "purple-bar" in my example above should be a "stick-at-top" object only.
Ciao,
HK

HK, a Stick at Top object is not "fixed".
Gary would have answered differently had he known this was what you were after.

One way is to set all the Stick at Top elements for have a special Name, htmlclass="topmost" and add this simple CSS to the Website Head Code block:

<style>
.topmost {
z-index: 100;
}
</style>

Things to watch out for:

• Even with a Soft-group, each object will keep moving until it hits the topmost position.
• Text sent to the bottom of a Text Area will still bubble up to the top; use a newline and at least a space to act as a buffer.
• A Sticky object always trumps a Stick at Top one.

Acorn

Quote:

---

Originally Posted by ich

Hi Gary,
thanks for taking care.

The solution you propose works fine when one want to fix an object in place.
But my target is to fix the object only (!) once it hits the screen top-edge, while scrolling.
Typically for Nav-Bars.
This is the reason why the "purple-bar" in my example above should be a "stick-at-top" object only.
Ciao,
HK

---

There are some different ways of doing this; one is to change the z-index specifically for ALL Stick-at-Top objects.

Add this line to the website HTML Code (head): <style>.xr_stt{z-index: 40 !important;} </style>

e.g.Attachment 130938

"40" is an arbitrary positive number high enough to ensure it is always on top.

Not the only way of doing this, but it does work. Acorn will have a better way.

Gary

Hi Acron, Gary,

sorry not having used the correct terminology which created confusion.
Thank you for your solution proposals.
I will definitely follow up and test the next days.

Regards,
HK

Welcome to TalkGraphhics ich :)

Quote:

---

Originally Posted by gwpriester

Welcome to TalkGraphhics ich :)

---

THX ;)