Place Under Ng

Displays a sidebar that fills the entire right half of its container.
To make sidebar have fixed positioning under some other element (e.g. toolbar),
a selector for that element should be passed as placeUnderSibling parameter.

Place Under Ng

Example

<div ng-app="Ring.place-under" ng-strict-di>

  <div class="head">Scroll down to see the effect</div>
  <div rg-place-under=".target-element" class="place-under">
    Element to be positioned under test element
  </div>

  <div class="target-element">
    Test element to sync with.
  </div>

  <div class="scrollable">
    Lorem ipsum dolor sit amet, consectetur adipiscing 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.
  </div>
</div>

import angular from 'angular';
import '@jetbrains/ring-ui/components/place-under-ng/place-under-ng';
import {getDocumentScrollTop} from '@jetbrains/ring-ui/components/global/dom';

window.addEventListener('scroll', function () {
  var target = document.querySelector('.target-element');

  var scrolledTop = getDocumentScrollTop();
  if (scrolledTop > 30) {
    target.style.position = 'fixed';
  } else {
    target.style.position = 'static';
  }
});

@value unit from '../global/global.css';

:global(.place-under) {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  padding: calc(unit * 2);
  background-color: #888;
}

:global(.head) {
  height: 30px;
}

:global(.target-element) {
  position: static;
  top: 0;
  width: 100%;
  padding: calc(unit * 2);
  background-color: #CCC;
}

:global(.scrollable) {
  height: 1000px;
  padding: calc(unit * 2);
  padding-top: calc(unit * 8);
  background-color: #EEE;
}