Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import {
- getContainerStyle,
- getComponentStyles
- } from './style';
- function FloatingBord({memberAttr, container, component}) {
- const $container = $(`[${memberAttr}="${container}"]`);
- const $component = $container.find(`[${memberAttr}="${component}"]`);
- const $win = $(window);
- const componentStyles = getComponentStyles();
- $component.css(componentStyles.fixing);
- const contianreStyle = getContainerStyle($component.innerHeight());
- $container.css(contianreStyle);
- return {
- get isReady() {
- return (
- this.$container.length > 0 &&
- this.$component.length > 0 &&
- this.$win.length > 0
- );
- },
- get $container() {
- return $container;
- },
- get $component() {
- return $component;
- },
- get $win() {
- return $win;
- },
- get isFloatingCondition() {
- return this._containerTop <= this._viewPortBottom - this._componentHeight;
- },
- get _viewPortBottom() {
- return this.$win.scrollTop() + this.$win.innerHeight();
- },
- get _componentHeight() {
- return this.$component.height();
- },
- get _containerTop() {
- return this.$container.offset().top;
- },
- set floating(floating) {
- this.$component.css(floating ? componentStyles.floating : componentStyles.fixing);
- }
- }
- }
- export const FLOATING_BORD = {
- memberAttr: 'data-floating-component',
- container : 'container',
- component : 'component'
- }
- export function setFloatingBord(options) {
- let componentIsFloating = false;
- const bord = FloatingBord(options);
- if (!bord.isReady) return;
- function _set(_floating) {
- return componentIsFloating = bord.floating = _floating;
- }
- _set(bord.isFloatingCondition);
- bord.$win.on('scroll.setFloatingBord', () =>
- componentIsFloating !== bord.isFloatingCondition && _set(bord.isFloatingCondition)
- );
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement