PricingBlog

Scroll event

  • iggy988-1466530169362845737

    Iggy

    5 days ago

    Hello,

    I am new in Nordcraft (former Bubbler), so have some questions... How can I change the background of a header element (a div with position: absolute) when scrollY becomes greater than 100? I tried using the scroll event available on elements, but it does not work. I also tried a custom JS formula like return window.scrollY > 100;, but that does not work either.

    Additionally, how can I implement smooth scrolling to a specific element on the page (scrollTo) when clicking a link in the header?

    Thank you in advance.
  • andreasmoller-1466531175014203624

    Andreas Møller

    5 days ago

    The custom formula should work.
  • andreasmoller-1466531983315304538

    Andreas Møller

    5 days ago

    Paste this into your project

    {
    "type": "files",
    "files": [
    {
    "data": {
    "name": "getScrollOffset",
    "arguments": [
    {
    "name": "elementOrId",
    "formula": null
    }
    ],
    "description": "Get the scroll offset of an element by ID, element reference, or default to window scroll",
    "version": 2,
    "handler": "function getScrollOffset(args, ctx) {\n const { elementOrId } = args;\n \n // If no argument provided, return window scroll\n if (!elementOrId) {\n return {\n x: window.scrollX 0,\n y: window.scrollY 0\n };\n }\n \n // If it's a string, treat it as an ID\n if (typeof elementOrId === 'string') {\n const element = document.getElementById(elementOrId);\n if (element) {\n return {\n x: element.scrollLeft 0\n };\n }\n // Element not found, return zeros\n return { x: 0, y: 0 };\n }\n \n // If it's an element, get its scroll offset directly\n if (elementOrId && typeof elementOrId === 'object' && elementOrId.nodeType === 1) {\n return {\n x: elementOrId.scrollLeft 0\n };\n }\n \n // Fallback to window scroll\n return {\n x: window.scrollX 0,\n y: window.scrollY 0\n };\n }",
    "key": "getScrollOffset",
    "__recent-file": true
    },
    "path": "formulas/getScrollOffset"
    }
    ]
    }
  • andreasmoller-1466532809215705315

    Andreas Møller

    5 days ago

    1466532808850673867-CleanShot_2026-01-29_at_21.36.062x.png
  • ... And Welcome!!
  • andreasmoller-1466537332432830625

    Andreas Møller

    5 days ago

    The new 2.0 Assistant is going to help a lot here.
    🤩1
  • iggy988-1466559609828544595

    Iggy

    5 days ago

    Oh, thank you for the quick response. I’ll try this tomorrow and let you know whether it worked. Thanks!
  • iggy988-1466568647710478377

    Iggy

    5 days ago

    One more question 😀 Where to paste that JSON code?
  • Tod-1466568649455177798

    Tod

    5 days ago

    Great job @Iggy! Your contribution to the Nordcraft Community just made you advance to Community Level 1! 🌲
  • andreasmoller-1466677591657287831

    Andreas Møller

    4 days ago

    Anywhere other than an input field:)