search

eddiemf / vue-affix

A Vue.js plugin that affixes an element on the window while scrolling based on a relative element
MIT License
405 stars 38 forks source link

This is based on the html/body tag scroll bar? #34

Closed zq99299 closed 5 years ago

zq99299 commented 5 years ago

Now my html/body scrollbar is disabled, and the content is nested inside a div with a scrollbar. Both vue-affix and relative content are in this div, but vue-affix does not take effect when the div's scrollbar scrolls.

<html> ---> no scroll bar
 <body> ---> no scroll bar
    <div>      ---> With scroll bar
      <vue-affix relative-element-selector="#example-content">
       xxx
      </vue-affix>
     <section id="example-content"></section>
   </div>
 </body>
</html>
eddiemf commented 5 years ago

By default the plugin will listen the window scroll event for changes, but you can change it with the scrollContainerSelector property in your vue-affix.

In your example it should be like this: 

<div id="scrollable-container">      ---> With scroll bar
  <vue-affix relative-element-selector="#example-content" scrollContainerSelector="#scrollable-container">
     xxx
  </vue-affix>
  <section id="example-content"></section>
</div>