Migrate bs affix

This commit is contained in:
Björn Fromme
2021-07-27 14:06:11 +02:00
parent 1078e031ae
commit fac269d3a2
4 changed files with 16 additions and 8 deletions
@@ -187,13 +187,6 @@ new Vue({
this.toggleMobileNavigation();
}
});
$('.searchbar')
.on('affixed.bs.affix', () => {
this.searchbarFixed = true;
})
.on('affixed-top.bs.affix', () => {
this.searchbarFixed = false;
});
},
},
created () {
@@ -0,0 +1,15 @@
import { Controller } from 'stimulus'
import {useDebounce} from '../mixins/useDebounce'
export default class extends Controller {
static classes = [ 'sticky' ]
static values = { offset: Number }
connect() {
useDebounce(this)
window.addEventListener('scroll', this.debounce(() => {
this.element.classList.toggle(this.stickyClass, window.scrollY > this.offsetValue)
}, 250))
}
}
@@ -14,7 +14,7 @@
:initial-filter-options='{filterOptions -> f:format.json() -> f:format.raw()}'
:date-presets='{settings.datePickerPresets -> f:format.json() -> f:format.raw()}'
inline-template>
<div class="container searchbar affix{f:if(condition: fixed, else: '-top')}"{f:if(condition: fixed, else: ' data-spy="affix" data-offset-top="650" data-offset-bottom="200"')}>
<div class="container searchbar{f:if(condition: fixed, then: ' affix')}"{f:if(condition: fixed, else: ' data-controller="sticky" data-sticky-sticky-class="affix" data-sticky-offset-value="650"')}>
<div class="container">
<f:form action="processSearch" controller="Search" method="post" name="searchParams"
object="{searchParams}" pluginName="searchresult" extensionName="epproducts"