Help me please fixing the scrolling issue

K

kapa.ai•7/27/25, 3:02 PM

Hi @Hussein. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

K

kapa.ai•7/27/25, 3:02 PM

----------------------
I'm sorry, but the knowledge sources provided do not contain information specific to recreating the scroll/stacking behavior you described from the Framer template, nor do they reference your GitHub repo or offer a direct solution for a fixed left side with a scrolling right side and section stacking in Nuxt.

However, based on the sources, here are some general tips that might help you troubleshoot scroll and stacking issues in Nuxt projects:

For scroll snapping and section stacking, ensure that the scroll container (often the
```
<main>
```
<main>
```
<main>
```
<main>
or a custom wrapper) has the correct CSS properties, such as
```
scroll-snap-type
```
scroll-snap-type
```
scroll-snap-type
```
scroll-snap-type
and
```
overflow-y: scroll
```
overflow-y: scroll
```
overflow-y: scroll
```
overflow-y: scroll
. The snapping should be applied to the scrolling parent, not the body, for best results. Example:

  main {
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
  }

  .hero-snap-section {
    scroll-snap-align: start;
    height: 100vh;
  }

  main {
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
  }

  .hero-snap-section {
    scroll-snap-align: start;
    height: 100vh;
  }

  main {
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
  }

  .hero-snap-section {
    scroll-snap-align: start;
    height: 100vh;
  }

  main {
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
  }

  .hero-snap-section {
    scroll-snap-align: start;
    height: 100vh;
  }

This approach is discussed in the context of Tailwind and Vue/Nuxt in the sources, but it may need to be adapted for your specific layout and stacking needs Scroll snapping not working with Tailwind CSS and Vue.js/Nuxt.js.

If you want one side fixed (e.g., the left) and the other scrolling, use CSS like:

  .container {
    display: flex;
  }
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    flex: 0 0 300px; /* or your desired width */
  }
  .content {
    flex: 1;
    overflow-y: auto;
    height: 100vh;
  }

  .container {
    display: flex;
  }
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    flex: 0 0 300px; /* or your desired width */
  }
  .content {
    flex: 1;
    overflow-y: auto;
    height: 100vh;
  }

  .container {
    display: flex;
  }
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    flex: 0 0 300px; /* or your desired width */
  }
  .content {
    flex: 1;
    overflow-y: auto;
    height: 100vh;
  }

  .container {
    display: flex;
  }
  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    flex: 0 0 300px; /* or your desired width */
  }
  .content {
    flex: 1;
    overflow-y: auto;
    height: 100vh;
  }

K

kapa.ai•7/27/25, 3:02 PM

For advanced scroll-triggered animations or stacking effects, you might consider using libraries like GSAP with ScrollTrigger, as referenced in the sources. These can help animate sections as they enter or leave the viewport, but the sources do not provide a full implementation for your use case Mixing Scrolltrigger with Lenis in a Nuxt project.

If you need more targeted help, please provide a minimal code example or clarify which part of the scroll/stacking behavior is not working as expected. The knowledge sources do not contain enough information to provide a step-by-step solution for your specific layout.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•7/27/25, 3:02 PM

@1393973433108267038 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

W

WiFi Plug•7/27/25, 3:03 PM

do you have a hosted link of your site

H

Hussein•7/27/25, 3:04 PM

no ij ust have my repo, im really stuck on this and cant solve it

H

Hussein•7/27/25, 3:05 PM

https://kajo-template.framer.website/?via=pawelgola

My Github repo : https://github.com/JP-juniorr/website_personal

Kajo - Agency & Portfolio Framer Template

Kajo is a sleek and modern agency and portfolio Framer Template, ideal for creative agencies, design studios, freelancers, or personal portfolios.

GitHub

GitHub - JP-juniorr/website_personal

Contribute to JP-juniorr/website_personal development by creating an account on GitHub.

W

WiFi Plug•7/27/25, 3:06 PM

I can make a basic recreation in a tailwind demo one min

H

Hussein•7/27/25, 3:06 PM

My friend i really appreciate if you clone my repo and maybe help with solving this by writing comments i do appreciate that will help me a lot

H

Hussein•7/27/25, 3:09 PM

If you see my repo now, the right side scrolls while the left is fixed ( the desired behavior i wanted ) but if you scroll on the left side you can immediately see it goes to the third section. Plus if you look on the template on framer i really want the same thing regarding the stacking sections over each other and so on

H

Hussein•7/27/25, 5:10 PM

@WiFi Plug are you willing to help on this mate ?

H

Hussein•7/27/25, 5:12 PM

anyone please ?

HHussein @WiFi Plug are you willing to help on this mate ?

W

WiFi Plug•7/27/25, 5:13 PM

oh I don't know how to do more complex animations like that

H

Hussein•7/27/25, 5:14 PM

appreciate your time and effort

Help me please fixing the scrolling issue

Similar Threads

Similar Threads

Similar Threads