CODEWITHSUNDEEP
javascriptvue.js
James Durham
James Durham

Reputation: 19

how to use data object into a style tag? vuejs

So i am trying to create a parallax effect by targeting background-position with a data object.

<div class="parallaxBanner" :style="{scrollBanner}">
</div>

<script>
    export default {
        data: function(){
            return{
                scrollBanner: 0,
            }
        },
        methods:{
            scrollPosition: function(){
                this.scrollbanner = window.scrollY % 0.5;
                console.log(window.scrollY);
            }
        },
        mounted() {
          window.addEventListener('scroll', this.scrollPosition);
        }
    }
</script>

not 100% how to target css in line value any suggestions would be a big help :)

Upvotes: 1

Views: 71

Answers (2)

Sanjaysinh Zala
Sanjaysinh Zala

Reputation: 134

You can directly assign method in style and write one method in computed:

HTML

<Row>
  <i-col :span="5" :style="styles" class="sidebar">
    <f-sidebar></f-sidebar>
  </i-col>
</Row>

SCRIPT

computed: {
  styles () {
    return {
      style.position = 'fixed'
      style['z-index'] = '99'
      style.height = '100%'
      style.background = '#363e4f'
    }
  }
}

Upvotes: 0

ittus
ittus

Reputation: 22393

If you want to set background-position, you can use

<div class="parallaxBanner" :style="{ backgroundPosition: scrollBanner }">
</div>

Upvotes: 1

Related Questions