japferreira Posted December 25, 2023 Share Posted December 25, 2023 Hi All, and Happy Holidays I've had some great help on this forum in the past, so I'm hoping for a helping hand while I build a website for a new business. I want about 5 sticky pages (sections) before the viewer gets to a regular scrolling page. I have it set up right now, but the pages following the sticky scroll do not work, and they are glitchy on Safari. Can someone help with code injection for those last few pages? Can I make all these variables? what if I only want 3 pages to be sticky? ... Right now I have this code I found on the forums: section[data-section-id="65865aff59fab8601dec7037"], section[data-section-id="658658b461bc297ba04b6507"], section[data-section-id="658667e5a7a31a1e2382e35f"], section[data-section-id="658667e4ff5066124f17d61b"], section[data-section-id="658667fabd5ee0759a254b7c"], section[data-section-id="658667fddf62bc57b1f3de25"], section[data-section-id="658668e981c33f389d4fd9d9"], section[data-section-id="658668fd3299fa1032580015"] { position: sticky !important; top: 0; } ... I tried this too, but it didn't work: .homepage #page .page-section:nth-child( n + 6 ):not( :nth-child( n + 13 ) ) { position : sticky; top : 0; } Here is the website: https://www.dustydrifters.com Thanks so much for helping, J Link to comment
tuanphan Posted December 27, 2023 Share Posted December 27, 2023 If you want to disable section 6 sticky, use this code section:nth-child(6) { position: relative !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
japferreira Posted December 27, 2023 Author Share Posted December 27, 2023 Hi Tuan, Thanks for your continued help; I appreciate it. I've tried all the code suggestions, and here's what I've found. All code works fine on Chrome or on a PC, but not on an iPhone or Safari. The last two weeks have been spent copying and pasting various codes from other people's suggestions on this forum, but I have yet to succeed. I want 5 pages of sticky sections at the beginning of this website, followed by "regular" scrolling pages of text after that. Right now, those text pages are "floating" behind the sticky images when I scroll on an iPhone. You can see this in the screenshot below where a "Buy Course" button is scrolling with an image behind. Here are websites that are doing similar things to what I want: https://olsonkundig.com https://imaginoptique.com https://andermatt-realestate.ch Thanks so much for helping me out! Link to comment
laurafishbaum Posted March 14 Share Posted March 14 @japferreira Did you end up solving this problem for mobile? I want to create a similar effect with 4 sticky sections, but I cant get it to work for mobile. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment