Use Sticky & Pinned position with Wix Studio
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- Learn to use the Sticky and Pinned positions to create unique movement as visitors scroll up and down the page.
In this lesson, we’ll look at how you can create engaging site behaviors by setting an element's position type to Pinned or Sticky.
Complete the Course Challenges Here:
www.wix.com/studio/academy/co...
--
0:00 - Intro
0:14 - Position demonstration
0:24 - Use the Pinned position
3:10 - Use the Sticky position
-
Learn more about Wix Studio:
www.wix.com/studio
Get started with our Essentials course:
wix.to/gT8VY7c
Join the Wix Studio Community:
forum.wixstudio.com
Follow us on social media:
➔ Instagram: / wixstudio
➔ X: / wixstudio
➔ TikTok: / wixstudio
➔ Facebook: / wixstudio
About Wix Studio:
The end-to-end platform for agencies and enterprises to create and manage exceptional sites with extreme efficiency. Smart design features, flexible dev tools and streamlined management capabilities mean you can do more, at scale.
Subscribe to our channel:
➔ www.youtube.com/@WixStudio?su... - วิทยาศาสตร์และเทคโนโลยี
I'm getting 'who's on first' vibes w this one
It's great!
We're glad to hear that you found this tutorial useful, Hung. We're positive you'll stick(y) it to your design!
So you have a link to this site please i want to see the scroll effect how its done.
Hey Keith, we're glad to hear that our guide inspired you to request more inspiration. The site showcased in the tutorial was made by our team to demonstrate some of the capabilities available and is not published. We encourage you to explore our Wix Studio inspiration page here > www.wix.com/studio/inspiration for sites created by our talented users and apply it to your own.
Hi, I have done this for the website and it works fine for the desktop version, but in the mobile view, it keeps sticking to the header (right beside the logo) automatically, making my site look entirely messed up. Please help.
Hey Ranita, thank you for bringing this to our attention. In order for us to assist you in this specific design, we'd need to take a closer look at your site. If you could please reach out to our expert team and provide them with the vision you'd like to achieve, we'd be happy to guide you. Reach out to them via the link here > wix.to/iZTuzNF
I have 3 sections that i want to scroll over top of each other as we scroll down the site. It all works smooth when i use the sticky effect but when I try and scroll past the last one it doesnt keep scrolling to the next section below it. What am I doing wrong? Its like the last one won't coninue scrolling up. Everything after it just goes underneath it.
Hi Nolan, sounds like you've made great progress so far. We'd like someone to take a look at the site you are working on. We'd first recommend sharing a a description of the issue along with a link to this video and a screencast of the issue on the Studio community so fellow community members can assist >> www.wix.com/studio/community. If you still need guidance then reach out to our Studio experts and they can assist.
@@WixStudio Dealing with the same exact thing - the final section does not leave the screen.
I'm wondering if you were ever able to solve this, and if so, how. I'm dealing with the same exact issue. Thanks -
@@ramseyclips move the entire last section to the back. So click and go to arrange or move the next page under it to the front so it can scroll in front of it
@@NolanKoop Thanks man, I appreciate it.
I have sticky buttons on bottom of the page and repeater in middle. Buttons and repeater appear transparent when they're passing trough repeater. What am i doing wrong. Help please!
Hi there. This seems like an issue that our technical team should look into further. Please submit a support request to our team by visiting here >> wix.to/iZTuzNF
Our team will be happy to assist you further from there.
I dont want the my pinned header to overlap to next section as that crops out section below header. how can I remove that overlapping?
Hi Suraj, thanks for bringing this to our attention. While the pinned header is designed to always stay at the top of the page, we can implement a transition effect that will either move or fade the header as you scroll down to lower sections.
Hi, how can I make a Sticky section in Mobile
Hi, just to clarify, are you asking how to ensure the sticky position carries over to mobile or looking for it to only function on mobile?
I have five sections set to be sticky, but the fourth one stays on top of the other and the bottom part of the page no matter what I do. How can I fix this?
Hey Veronica, thank you for bringing this to our attention. It appears that the order of the section layer is incorrect. When using Sticky the sections must be arranged one after the other. You can do so by opening the 'Layers Panel' and selecting 'Bring To Front' in each section, starting from the first section and ending with the last.
Im using this on portion of my site menu and the area expands every time I try to to this, not sure what to do,
Header is very skinny and is broken into two layers one with menu that supposed to move, puts its only 40 px tall
Hey there, thank you for bringing this matter to our attention. It appears that you're encountering a particular issue on your site and we'd like to investigate further. We recommend reaching out to our customer care team here > wix.to/iZTuzNF and we'd be happy to assist.
@@WixStudio Ok Thanks
This gradually makes sense but it requires a lot of fiddling and playing to see what actually works, its not just a case of changing the values and for some reason published version looks so different to the Studio version.
I'd like to know how to create an offset at the button, but its proving very difficult to get the balance of where to stick it and how much to offset and which margins to use.
I'm thinking the work around would just be to put a separate cell between one cell and another that way I create a buffer.
Hi again Keith, we see you commented a few times here with follow up questions. For these types of questions we recommend speaking with one of our Wix Studio experts so they can take a look at your specific site and questions. You can consider posting on one of our dedicated communities here > wix.to/SiperLT or by submitting a ticket to our customer care team at wix.to/iZTuzNF.
@@WixStudio Thanks I'm in comms with the help centre regularly and the support from Wix has been great. Oddly I went back to the editor and this problem was not happening the second time I used it.