Add linking the navigation bar with the content example

[zhuyu4839]

Like:

[hunger]

Do you have the code for this example? That would make it clearer what you actually want to do.

[zhuyu4839]

The code is here.

I hope that when I select function 2, 3, or 4 on the left navigation bar, the right side will scroll accordingly;
when the right side scrolls, the left navigation bar will follow the changes.

[hunger]

So you want the right side-menu always show the color the cursor is on? Or the color at a fixed point on the screen (e.g. the top edge of the scroll view)?

[zhuyu4839]

2025-03-10-18-48-14.mp4

I hope the navigation and content like first gif.

[hunger]

Would this get you started?

import { Button, HorizontalBox, ScrollView, AboutSlint } from "std-widgets.slint";

export component Demo {
    property <string> positional-color: "red";

    height: 100px;

    HorizontalBox {
        ScrollView {        
            VerticalLayout {
                red := Rectangle {
                    background: Colors.red;
                    height: 200px;
                }
                green := Rectangle {
                    background: Colors.green;
                    height: 200px;
                }
                blue := Rectangle {
                    background: Colors.blue;
                    height: 200px;
                }
            }
            changed viewport-y => {
                if self.viewport-y <= -400px {
                    root.positional-color = "blue";
                } else  if self.viewport-y <= -200px {
                    positional-color = "green";
                } else {
                    positional-color = "red";
                }
            }
        }

        Text {
            text: root.positional-color;
        }
    }
}

Slintpad link