Skip to Content
Menu
Musisz się zarejestrować, aby móc wchodzić w interakcje z tą społecznością.
To pytanie dostało ostrzeżenie
2 Odpowiedzi
2491 Widoki

Hi,

we use Odoo 14 and I would like to show a button in our website after certain scroll position. This basic JS code below calculates vertical scroll and when it reaches half of the window height, it adds active class to the button. So, it shows the button. When I run this code in an simple HTML project, it works but same code doesn't work in Odoo. Is there any idea that how can I do that?




window.addEventListener("scroll", (event) => {
​var scroll = this.scrollY;
​if (scroll >= window.innerHeight / 2 ) {
​document.getElementById("IdButton").classList.add("active");
​} ​else {
​document.getElementById("IdButton").classList.remove("active");
​}
});
Awatar
Odrzuć
Najlepsza odpowiedź

Hi,

Please refer to the code:

const publicWidget = require('web.public.widget');


    publicWidget.registry.ScrollButton = publicWidget.Widget.extend({

        selector: 'body',   // attach to body or a container

        start: function () {

            const button = document.getElementById("IdButton");

            if (!button) {

                return;  // stop if button not on page

            }


            window.addEventListener("scroll", function () {

                let scroll = window.scrollY || document.documentElement.scrollTop;

                if (scroll >= window.innerHeight / 2) {

                    button.classList.add("active");

                } else {

                    button.classList.remove("active");

                }

            });

        },

    });


Hope it helps.

Awatar
Odrzuć
Najlepsza odpowiedź

Hello George

Just a suggestion in odoo you can use this as a scroll event

$(document).ready(function () {

    let lastScrollTop = 0;

    const $button = $('#my-button'); // your button selector


    $('#wrapwrap').on('scroll', function () {

        let scrollTop = $('#wrapwrap').scrollTop(),

            windowHeight = $(window).height();


        console.log('Current scrollTop:', scrollTop);


        // Add 'active' class when scroll reaches half window height

        if (scrollTop > windowHeight / 2) {

            $button.addClass('active');

            console.log('Button shown');

        } else {

            $button.removeClass('active');

            console.log('Button hidden');

        }


        lastScrollTop = scrollTop;

    });

});


Awatar
Odrzuć
Powiązane posty Odpowiedzi Widoki Czynność
2
cze 22
3707
1
kwi 22
2553
0
lut 22
4785
1
sty 22
2514
1
sty 21
3299