Sticky side-bar not working

I’m trying to make a sticky side-bar with little succes. Tried looking at the docs and on the internet to find some solutions with no luck. this is the code i’m trying do deploy

stickySideBar component

//@flow
import $ from 'jquery';
window.jQuery = window.$ = $;
// Foundation
import { Foundation } from 'foundation-sites/js/foundation.core.js';
Foundation.addToJquery($);
import { Triggers } from 'foundation-sites/js/foundation.util.triggers.js';
Triggers.init($, Foundation);

$(document).foundation();

const StickySideBar = props => {
	return (
		<div
			data-sticky-container
			className='cell small-4 left sticky-container'
			data-options='marginTop: 0'
		>
			<div className='cell sticky' data-sticky data-margin-top='0'>
				<div className='grid-y side-bar'>{props.children}</div>
			</div>
		</div>
	);
};

export default StickySideBar;

index.js

// @flow

import { useState, Component } from 'react';

import { connect } from 'react-redux';

import 'resources/main.scss';

import type { State } from 'AppState/Types';

//import { StickySideBar } from 'components/stickySideBar';

import Link from 'next/link';

import fetch from 'isomorphic-unfetch';

import dynamic from 'next/dynamic';

const StickySideBar = dynamic(() => import('components/stickySideBar'), {

  ssr: false

});

type Props = {};

const Index = (props: Props) => {

  return (

    <>

      <div className='grid-x'>

        <StickySideBar>

          <div className='small-4' style={{ marginTop: '30px' }}>

            <p className='text-center'>Youtility</p>

          </div>

          <div className='cell'>

            <p className='text-center'>Login</p>

          </div>

          <div className='cell'>

            <p className='text-center'>Chi Siamo</p>

          </div>

          <div className='cell'>

            <p className='text-center'>Attività</p>

          </div>

        </StickySideBar>

        <div className='cell small-8 left'>

          <p className='margin-x lead'>

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

            aliquip ex ea commodo consequat. Duis aute irure dolor in

            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

            culpa qui officia deserunt mollit anim id est laborum.

          </p>

          <p className='lead'>

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

            aliquip ex ea commodo consequat. Duis aute irure dolor in

            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

            culpa qui officia deserunt mollit anim id est laborum.

          </p>

          <p className='lead'>

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

            aliquip ex ea commodo consequat. Duis aute irure dolor in

            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

            culpa qui officia deserunt mollit anim id est laborum.

          </p>

          <p className='lead'>

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

            aliquip ex ea commodo consequat. Duis aute irure dolor in

            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

            culpa qui officia deserunt mollit anim id est laborum.

          </p>

          <p className='lead'>

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

            aliquip ex ea commodo consequat. Duis aute irure dolor in

            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

            culpa qui officia deserunt mollit anim id est laborum.

          </p>

          <p className='lead'>

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

            aliquip ex ea commodo consequat. Duis aute irure dolor in

            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

            culpa qui officia deserunt mollit anim id est laborum.

          </p>

          <p className='lead'>

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

            aliquip ex ea commodo consequat. Duis aute irure dolor in

            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

            culpa qui officia deserunt mollit anim id est laborum.

          </p>

          <p className='lead'>

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

            aliquip ex ea commodo consequat. Duis aute irure dolor in

            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

            culpa qui officia deserunt mollit anim id est laborum.

          </p>

        </div>

      </div>

    </>

  );

};

const mapStateToProps = (state: State) => {

  return {};

};

const mapDispatchToProps = dispatch => {

  return {};

};

export default connect(mapStateToProps, mapDispatchToProps)(Index);

Hi, which version of Foundation Sites do you use?

I think https://github.com/foundation/foundation-sites/blob/84a0a337adeab7a2706a673d8694fc6adc2a15d1/js/foundation.util.mediaQuery.js and a few more files are needed.

Does it work with the full foundation.js version?

hi. I’m using the 6.6.0 version and I imported the full foundation package. I console logged it on the console and it gave me everything

I’ve re-read the docs and found that some other files were to be imported. I thought that the foundation core had everything, my bad.

added this modules

//@flow
import $ from 'jquery';
window.jQuery = window.$ = $;
// Foundation
import { Foundation } from 'foundation-sites/js/foundation.core.js';
Foundation.addToJquery($);
import { Triggers } from 'foundation-sites/js/foundation.util.triggers.js';
Triggers.init($, Foundation);
import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery.js';
MediaQuery._init();
import { Sticky } from 'foundation-sites/js/foundation.sticky.js';
Foundation.plugin(Sticky, 'Sticky');

$(document).foundation();

but still no results

Can you try the full Foundation Sites 6.6.1 bundle?

updated foundation-sites to 6.6.1 but sadly no results. Gonna see if there is a way to make a full import of all the js foundation packages in one go.

tried also by importing directely foundation.js instead of foundation.core.js. when console logging every plugin comes with it but even if I updated via yarn, the version it gives me is 6.6.0

//@flow
import $ from 'jquery';
window.jQuery = window.$ = $;
// Foundation
import { Foundation } from 'foundation-sites/js/foundation.js';
Foundation.addToJquery($);
import { Sticky } from 'foundation-sites/js/foundation.sticky.js';
Foundation.plugin(Sticky, 'Sticky');

$(document).foundation();

const StickySideBar = props => {
	return (
		<div data-sticky-container className='cell small-4 left'>
			<div className='cell cell-sticky' data-sticky>
				<div className='grid-y side-bar'>{props.children}</div>
			</div>
		</div>
	);
};

export default StickySideBar;

removed and added again foundation-sites. now gives version 6.6.1 when console logging. still nothing

So you use React? In this case you have to reinitialize after rendering the component. Not before.
https://www.npmjs.com/package/react-foundation might be probably better in this case.

See https://codepen.io/DanielRuf/pen/RwNjZEM where it works.
https://get.foundation/sites/docs/sticky.html

found the solution. wrapped the $(document).foundation() line inside a useEffect hook and now it works. Just have a little side effect now. when hitting the bottom of the page the content of the sticky div slighty goes upward. it has this mutations

when a top of scrollbar

<div class="cell grid-y side-bar sticky is-anchored is-at-top" data-sticky="true" data-margin-top="0" data-resize="ezc5p7-sticky" data-mutate="ezc5p7-sticky" style="max-width: 142.156px; margin-top: 0px; bottom: auto; top: 0px;"><p class="text-center cell small-5">Youtility</p><p class="text-center cell">Login</p><p class="text-center cell">Chi Siamo</p><p class="text-center cell">Attività</p></div>

when somewhere in the middle

<div class="cell grid-y side-bar sticky is-at-top is-stuck" data-sticky="true" data-margin-top="0" data-resize="ezc5p7-sticky" data-mutate="ezc5p7-sticky" style="max-width: 142.156px; margin-top: 0em; bottom: auto; top: 0px;"><p class="text-center cell small-5">Youtility</p><p class="text-center cell">Login</p><p class="text-center cell">Chi Siamo</p><p class="text-center cell">Attività</p></div>

when i get to the bottom

<div class="cell grid-y side-bar sticky is-anchored is-at-bottom" data-sticky="true" data-margin-top="0" data-resize="ezc5p7-sticky" data-mutate="ezc5p7-sticky" style="max-width: 142.156px; margin-top: 0px; bottom: auto; top: 1172px;"><p class="text-center cell small-5">Youtility</p><p class="text-center cell">Login</p><p class="text-center cell">Chi Siamo</p><p class="text-center cell">Attività</p></div>

is there a way to set the anchor always on the top to avoid this behaviour? thanks

never mind. it seems it was an odd behaviour when switching on and off the browser developer panel. thanks a lot for the help. really appreciated

Thanks for the feedback. Closing as resolved.