Блог

У меня есть элемент внутри моего компонента vue, я хочу применить фиксированный класс, когда пользователь прокручивает мимо него, однако это не вступает в силу, и я вижу липкую консоль.журнал запускается при каждой прокрутке, а не только при передаче элемента. Я также хочу удалить класс, когда элемент не передается.

Вот мой компонент с кодом jquery.

 <template>
<div id="sticky" style="width:35%; height:85vh; padding:0px 0px; margin:0px 0px 0px auto; background-color:rgb(10,10,10); display:flex; flex-direction:column; position:relative; border:5px solid #9d0000; overflow:hidden; outline:2px solid red;">
        </div>
    </div>
</template>
<!--SCRIPTS-->
<script>
import $ from 'jquery';
export default {
name: 'CARTmodal2',


mounted() {
    console.log(this.$options.name ' component successfully mounted');

    let sticky = $('#sticky'),
    stickyTop = sticky.offset().top,
    scrolled = false,
    $window = $(window);

    /* Bind the scroll Event */
    $window.on('scroll', function(e) {
        scrolled = true;
    });

    let timeout = setInterval(function() {
        /* If the page was scrolled, handle the scroll */
        if (scrolled) {
            scrolled = false;
            if ($window.scrollTop() >= stickyTop) {
                sticky.addClass('fixed');
                console.log("sticky");
            }
            else {
            sticky.removeClass('fixed');
            }
        }
    }, 200);


},



};
</script>
<style scoped>
.fixed{position:fixed; top:0px; left:0px; border:1px slid black;}
</style>
  

Есть идеи, что я делаю не так?

Проблема в том, что вы добавляете классы извне в экосистему Vue, Vue заменяет класс, содержащийся в обновлении, и это игнорирует ваши внешние изменения, используйте внутреннее условие и :class="{'fixedClass':isScrolled}" параметр, чтобы добавить или удалить его.

Возможно, этот пример того, как создать исправленный заголовок, мог бы помочь вам в части обработки события прокрутки.

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