How to stop pinned element from scrolling over footer!

Ask the community
, ,
1

Hi All,

I have a required of a footer of height more than 500 px. There is contact form on right side which I would like to pin on the page. However, this contact form also scrolls over the footer, which inhibits me from design the footer as i want. Does anyone have a work around how to make the contact form disappear or stop from going over the footer? Thanks

2

Is that good for you?
https://jonatandor35.wixsite.com/test/pinning

(if you make the yellow & violet boxes transparent?)
If that what you mean, let me know, and I’ll add details.

3

But keep in mind that this workaround make the footer area below the pinned element unclickable.
Otherwise you’ll have to pin the element to a higher position and not to the absolute bottom.

4

Thanks a lot JD. I do have lot of clickable elements in the footer. I cannot put the element to a higher position because then it moves to a higher position on the header side. Do you think viewportenter can help? So when the footer appears on screen, the contact form hides. But I dont know how to code this.

5

@info38197 First of all, you can control the position of the pinned element via the editor. It’s not only top or bottom. Try and see.
Second. Yes you can make the pinned element collapse on viewportEnter and expand on viewportLeave.
Inside the $w.onReady() function, use this code:

$w("#footer1").onViewportEnter((event) => {
    $w("#contactForm").collapse();//use the form property id
})
$w("#footer1").onViewportLeave((event) => {
    $w("#contactForm").expand();
})
6

Hi JD, Sorry fore replying late. Let me check this.

7

So many thanks JD. Great!!! :slight_smile:

8

Is possible to freeze #contactForm instead of collapse? I want to pin an element to the body of the site only, not over my header or footer.

9

@francisco1murillo3

You can’t ‘freeze’ a element instead of collapse.

Try looking at adding an anchor near to your header and footer and simply have the pinned element hide/collapse or show/expand when the anchor comes into or goes out of the viewport.
https://www.wix.com/corvid/reference/$w.Anchor.html

Or as J.D. did on the example given, simply add a transparent box and have the element hide/collapse or show/expand when the header or footer comes into view or goes out of view.

Please add a new post if more help is needed.
Post Closed.