Menu icon Foundation
Stick to bottom of element

Hi is it possible to get the bottom of an element to stick to the bottom of an id? i.e. I don't want the image to scroll past the bottom of the div that it is within. but everything i try seems to base what the btm anchor is on the top of the sticky element.

Hope that makes sense :)

Ta in advance

Ben

stickyanchor

Hi is it possible to get the bottom of an element to stick to the bottom of an id? i.e. I don't want the image to scroll past the bottom of the div that it is within. but everything i try seems to base what the btm anchor is on the top of the sticky element.

Hope that makes sense :)

Ta in advance

Ben

Rafi Benkual over 2 years ago
Ben Wills over 2 years ago

Hi Rafi, thanks but i'd tried that.  My code is below, but basically i need the .canvas-ribbons to move from the header to the bottom, but at present the overflow the bottom before they stop :( adding stick-to-bottom just sticks them to the bottom of the header without them moving at all.

This is where they start:

This is where they should finish:

but they carry on to here:

<div data-sticky-container>
  
    <div data-sticky data-top-anchor="header" data-btm-anchor="header:bottom" style="width:100%;">
      <div class="canvas-ribbon connect" data-open="offCanvasLeft"><img src="img/connect-ribbon.png" alt="Connect"/></div>
      <div class="canvas-ribbon diary" data-open="offCanvasRight"><img src="img/diary-ribbon.png" alt="What's On?"/></div>
    </div>
  
    <header id="header">

      <div class="row logo show-for-medium-up">
        <div class="small-12 columns text-center">
          <a href="/"><img src="img/harvest-white.png" alt="Harvest"/></a>
          <a href="/" class="show-for-small-only"><img src="img/harvest-icon.png" alt="Harvest"/></a>
        </div>
      </div>

      <div id="welcome" class="row welcome">
        <div class="small-12 columns text-center">
          <img src="img/welcome.png" alt="Welcome"/>
        </div>
      </div>
      
    </header>
    
    <nav data-sticky data-margin-top="0" data-top-anchor="header:bottom" style="width:100%">
     <div class="top-bar show-for-medium" id="primary-menu">
        <div class="top-bar-left">
            <ul class="medium-horizontal vertical menu dropdown" data-responsive-menu="accordion medium-dropdown" role="menubar" data-dropdown-menu="xs67uf-dropdown-menu" data-mutate="v26dnx-responsive-menu" data-events="mutate">
            <li class="active active-path hide-for-medium-only" role="menuitem"><a href="http://harvest:8888/index.php" target="_self" class="active active-path hide-for-medium-only">Home</a></li><li class="has-submenu is-dropdown-submenu-parent opens-right" role="menuitem" aria-haspopup="true" aria-label="Who We Are" data-is-click="false"><a href="http://harvest:8888/index.php/who-we-are" target="_self" class="has-submenu">Who We Are</a><ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" role="menu" style=""><li class="" role="menuitem"><a href="http://harvest:8888/index.php/diary" target="_self" class="">Diary</a></li>				</ul>
        </div>
      </div>
    </nav>
    
    <section class="content"> 
    <div class="row">
      <div class="small-12 columns">
        <h1>Page Title: Lorem ipsum dolor sit amet</h1>
      </div>
    </div>
    </section>
    
  </div>