How to achieve a sticky header from the start?

FBa · May 11, 2020, 11:36pm

I’m trying to get a “sticky” header from the start. As you see here, it only works well after I make an initial click to the skybox.

github.com

lucastwong/demo/blob/master/index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html,
      body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      h1 {
        position: sticky;
        top: 15%;
      }

This file has been truncated. show original

Deltakosh · May 12, 2020, 3:42pm

Well this is not really a Babylon.js related question right?

FBa · May 12, 2020, 3:59pm

I guess not?! I just don’t know if Babylon allows pasting stuff over it, even though it’s opened as a full screen.

Deltakosh · May 12, 2020, 4:05pm

Well without a repro it is complicated to say

Can you repro in the Playground maybe?

FBa · May 12, 2020, 4:17pm

Can you take a look at the GitHub file that I have attached? Playground won’t do in this case because I’m involving VexFlow as well.

Deltakosh · May 12, 2020, 4:33pm

Maybe at least something live? I don’t have time unfortunately to install it and run it

FBa · May 12, 2020, 4:37pm

Just copy my code from GitHub and run it on jsfiddle. You don’t need to install anything.

FBa · May 12, 2020, 4:39pm

How can I bypass the first picture and go directly to the second picture (with music inside the skybox). I always have to click the skybox once before it transitions.

Deltakosh · May 12, 2020, 4:55pm

Well if it is that simple, please do it so we can help you. The minimum we need to work the faster the answer

Topic		Replies	Views
Creating simple examples in Babylon.js for regular practice Tutorials and tips	18	6381	December 30, 2021
Feasibility check for devs Questions	4	523	June 18, 2019
Website with Babylon animation on scroll Demos and projects	16	1678	February 28, 2022
Thoughts on Adding HTML in scene feature (PR) Questions	7	234	December 16, 2023
Adding "floating labels" Questions	14	3164	July 13, 2021

How to achieve a sticky header from the start?

Related Topics