Hello,

I need help to create a sticky or floating button over a list in a mobile app. The idea is the button stand still when i do the scroll over the list.

Something like this but over a list:


At the moment i have the list and the button is standing bellow the list but fixed. When i scroll it goes with the list.


Take a look at this and see if it can help you.

https://www.w3schools.com/howto/howto_css_sticky_element.asp

thanks for your reply but even with position set to sticky does not work.

The button keeps moving with the scroll.

Hi Brandaopj,

A search on google (our biggest friend) tells me that the sticky does not work on some situations, like for example, inside table child elements or if a parent has the "overflow: ..." property set...

This will make your task much more difficult, as it is possible to find some workarounds, but most require the use of JavaScript...

Cheers

Hi brandaopj,

Try to use this Custom CSS for a sticky button.

SyntaxEditor Code Snippet

.sample{
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

Hope this helps!
Thanks

Hi brandaopj,

You can put button in the bottom placeholder so that the button will stand still when you scroll it.

check the screenshot for reference

 wrote:

Hi brandaopj,

You can put button in the bottom placeholder so that the button will stand still when you scroll it.

check the screenshot for reference


hello, This almost work but i get a white background in the container with the button:


i´ve tried to set "background-color: transparent;" but did not work.


Viraj Kataria wrote:

Hi brandaopj,

Try to use this Custom CSS for a sticky button.

SyntaxEditor Code Snippet

.sample{
    position: fixed; /* Stay in place */
    z-index: 10000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

Hope this helps!
Thanks

thanks for the reply but the button stills moving with the scroll.


Hi there,

Did you try the floating content from Silk UI or mobile UI? 

Regards,

Pankaj.




Hi Brandaopj,


I guess this is what you want?? --->  Demo Link

If so please inspect the button for more clarity and below is the applied css on the button:

SyntaxEditor Code Snippet

"   width: 250px; 
    border-radius: 35px;
    position: fixed;
    top: 85%;
    left: 17%;
"


Thanks.

Regards,

Benjith Sam

brandaopj wrote:

 wrote:

Hi brandaopj,

You can put button in the bottom placeholder so that the button will stand still when you scroll it.

check the screenshot for reference


hello, This almost work but i get a white background in the container with the button:


i´ve tried to set "background-color: transparent;" but did not work.


Use custom CSS for background

SyntaxEditor Code Snippet

.BGContainer{
    background-color: transparent !important;
    background: transparent !important;
}

Hope this helps!
Thanks


Viraj Kataria wrote:


Use custom CSS for background

SyntaxEditor Code Snippet

.BGContainer{
    background-color: transparent !important;
    background: transparent !important;
}

Hope this helps!
Thanks



Hi Viraj,

!important; is not recommended as per cascade guideline. is there any specific reason you put !important for that.


 it should be used only where it is absolutely necessary (in very few occasions) and when there is no other option. In most cases, it is possible to get rid of the need for using !important rules by simply changing the HTML tags on your page or assigning new CSS selectors to them.



Regards,

Pankaj


Benjith Sam wrote:

Hi Brandaopj,


I guess this is what you want?? --->  Demo Link

If so please inspect the button for more clarity and below is the applied css on the button:

SyntaxEditor Code Snippet

"   width: 250px; 
    border-radius: 35px;
    position: fixed;
    top: 85%;
    left: 17%;
"


Thanks.

Regards,

Benjith Sam

ok this solution is near but i have an issue.

Every time i click on one option of the bottom bar, the button goes up and them goes down again :(

you can see a small video here:

https://drive.google.com/file/d/1MHMWj9uq6KN4XQORCSzG9KFgGS2-ZmNC/view




Hi Brandaopj,


I'm not that much expertise in front-end section but as per my observation I found that the button position get changed on screen transitions. If you set the Default Screen Transition to Fade or None the button will get hold in its fixed position. It's something related to JS+CSS magic :)

Please share the solution if you figure it out.

Thanks



Kind Regards,

Benjith Sam

thanks!! your reply fixed the moving div :)