Fixation when scroll

Need help
1

Hello!
I’m new to bubbles and I need your help.
I want the floating group to stay on the red line when scrolling and not go into the footer. I tried to apply JS (placed in the html block), but it did not work. The floating group should scroll and stop at a specific location. How can I solve this problem? Thank you!
image
var element = document.getElementById(“fg”);
var stopPosition = 800;
window.addEventListener(“scroll”, function() {
var currentPosition = window.scrollY;
if (currentPosition >= stopPosition) {
element.style.position = “absolute”;
element.style.top = stopPosition + “px”;
} else {
element.style.position = “fixed”;
element.style.top = “0px”;
}
});

2

try to set it: float to bottom and top.

3

do you mean it?
image

4

exactly. You don’t need javascript or any code for what you want to achieve.

5

If I use this function, then the element does not scroll. I want it to scroll to a certain place and then stop. Or am I doing something wrong?

6

@danilov.day is this what you’re looking for?

Sticky demo

Editor link

Then you can use a group and make the position of this group ‘sticky’ on scroll.

Or without being dependend on a script @daviddr17 suggested:

Or do you need to use a FG?

7

Yould also use just pure css:

  1. Give the group or element an id name at the bottom of the element settings

  2. put an html element on the page with the following html:

    #idname {
    position: sticky;
    top: 0;
    }

  3. replace idname with the given id and replace 0 with your value

This will make your element sticky inside its container.

8

@daviddr17 or you could propose using no code… :wink:

1 Like
9

Thank you very much for your response. This option didn’t help. I use floating grout. When the page starts to scroll, the element simply disappears.
My code:
Script:

var fixmeTop = 150

$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$(’#fg’).css({
position: ‘sticky’,
top: ‘20px’
});
} else {
$(’#fg’).css({
position: ‘relative’,
top: ‘’
});
}
});

10

Thanks for the answer. This option didn’t work either. The element continues to work as before.

11

No worries, happy to help!

Is there a specific reason why you are using a floating group?

12

There is no specific reason. I can use the Group element. Do you think the problem is that I use floating group?

13

I think so yes.

14

Thank you! I’ll redo it now.

15

This solution worked! Many thanks for the help! :slightly_smiling_face:

1 Like
16

This topic was automatically closed after 70 days. New replies are no longer allowed.