Is there a way to replicate this warning on the bottom of dsuvia.com in bricks? I want to put a similar box that follows you around the page and takes up about 30% of the page
Basically looking for scrolling effects but I’m guessing that is not possible on bricks right now without coding or using one of the add-ons
I don’t know if this is the solution you need but i did a test according to the website you shared.
You can visit this demo to check it out.
I have created a footer with 2 sections: Content and Fixed Block
This is the position Fixed Block
Here is the js snippet that I added
<script>
const fixedBlock = document.getElementById("brxe-qnqzdt");//id section Content
const content = document.querySelector("#brxe-bctrps");//id section Fixed Block
function getContentTopPositionRelativeToViewport() {
const contentRect = content.getBoundingClientRect();
const topPositionRelativeToViewport = contentRect.top;
const topPosition = fixedBlock.offsetTop;
if(topPosition >topPositionRelativeToViewport){
fixedBlock.style.transform = "translateY(100%)";
}else{
fixedBlock.style.transform = "translateY(0%)";
}
}
getContentTopPositionRelativeToViewport();
window.addEventListener("scroll", getContentTopPositionRelativeToViewport);
</script>```
Hope it can help youThanks for the help. This is exactly what I was looking for. I was hoping there was a built in function for it but this script look good. I’ll give this a shot.
Hi @Ultron - I just tried your solution here: Test Sticky – demo2, below is my structure in Bricks (Screenshot). I think I’m still lacking configurations because I can’t seem to get it right? Are you able to provide more details about your fix that could help me? Thanks
Hi @imtrtdev , I took a look at the website you sent and noticed that the script you added doesn’t seem to be properly formatted. Can you review that part and let me know the results?
Hi @Ultron - I used the element of Bricks “Code” to insert the javascript (See Screenshot). Are there any ways to apply this? Thanks
Hi @imtrtdev , Have you given bricks permission to execute the code? If not, you can enable it in Bricks → Settings → Builder access → Code Execution → select the role you want to authorize.
Then you reload your builder page and enable execute code
Good luck
@Ultron - I just done above but still the I can’t get this to work. I need the sticky section to disappear once it reached the content below but is visible on load like the example here: https://dsuvia.com/. Do you think I’m missing anything? Your help is much appreciated. Thanks
@imtrtdev Perhaps it’s because of the JavaScript code. Are you sure you’ve changed the ID in the code I sent?
Yes @Ultron, I changed the ID for the fixed and content section. See 3 Screenshots here. I have 3 sections, 1 for content then for fixed then another content that goes after the sticky/fixed section just like https://dsuvia.com/. Thanks
@imtrtdev It’s possible that there’s a mistake in my code. Can you switch the positions of the two Id in the script?
@imtrtdev Looks like I’ve discovered the problem. You need to have content above “section content”. I tried changing the id of “content” variable and found that it still worked fine.
@Ultron - I duplicated the original section content (id: #brxe-jytdgp) then placed above it (id: #brxe-mnafre). I didn’t modify anything from the script and this is what happens: Test Sticky – demo2. Thanks
@imtrtdev - You can try editing the id to look like the image I sent. By the way, the position of section “brxe-kiumpq” should be set to fixed
Thank you so much @Ultron it works! Just one last question, may I ask how can I increase the height of the fixed section “brxe-kiumpq” so the content fits well. Thanks again!
@imtrtdev - Glad to hear it worked for you. If you want to adjust the height of “brxe-kiumpq” you can set the bottom position to 0. Good luck.
@Ultron - got it. Thank you so much for your big help! 