Szerokość div podczas przesuwania strony

0

Witajcie.
Mam taką stronę: http://serwer1356363.home.pl/pub/_demo/

Po prawej stronie mam accordion z Bootstrapa 4. W momencie gdy przesuwam okno przeglądarki w dół, accordion "przykleja" się do góry - i to jest ok.
Problem w tym, że zmienia się jego szerokość (zarówno w oryginale jak i po rozwinięciu).

Wie ktoś może w jaki sposób można to naprawić?

1

Robi ci to skrypt umieszczony na stronie:

    function sticktothetop() {
        var window_top = $(window).scrollTop();
        var top = $('#stick-here').offset().top;
        if (window_top > top) {
            $('#stickThis').addClass('stick');
            $('#stick-here').height($('#stickThis').outerHeight());
        } else {
            $('#stickThis').removeClass('stick');
            $('#stick-here').height(0);
        }
    }

    $(function () {
        $(window).scroll(sticktothetop);
        sticktothetop();
    });

A konkretniej przełączanie klas $('#stickThis').addClass('stick');.

Zmniejszanie szerokości menu jest pochodną umieszczenia w klasie #stickThis.stick { właściwości position: fixed;
Co wynika z faktu, że w ten sposób wyrywasz element z kontekstu jego oryginalnego rodzica i umieszczasz na stronie jako niezależny.
Rozwiązaniem powinno być każdorazowe odczytanie szerokości elementu <div class="tableBox"> i zaaplikowanie jej do <div id="stickThis">

0

W skrócie:
Wywalasz

#stickThis.stick {
...
position: fixed; <- wywalić

Oraz linijkę z js:

$('#stick-here').height($('#stickThis').outerHeight());

I powinno jako tako działać :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1