---
title:                                  CSS Examples
tagline:                                floating div
description:                            floating div

tags:                                   [ Page, Roundtrip ]
index:                                  [ Start, Template, Whats, Up, Readme, TL;DR ]
categories:                             [ pages ]

permalink:                              /pages/public/learn/fsb/
regenerate:                             false

resources:                              [ lightbox ]
resource_options:
---

// Enable the Liquid Preprocessor
// -----------------------------------------------------------------------------
:page-liquid:


// Set other global page attributes here
// -----------------------------------------------------------------------------
//:my-asciidoc-attribute:

//  Load Liquid procedures
// -----------------------------------------------------------------------------
{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}


// Initialize entry document environmental attributes
// -----------------------------------------------------------------------------
{% include {{set_env_entry_document}} %}

// Load tag, url and data attributes
// -----------------------------------------------------------------------------
// include::{includedir}/attributes.asciidoc[tag=tags]
// include::{includedir}/attributes.asciidoc[tag=urls]
// include::{includedir}/attributes.asciidoc[tag=data]

// Set local page attributes
// -----------------------------------------------------------------------------
// :images-dir:                         {imagesdir}/path/to/page/images

// Page content
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// Include sub-documents
// -----------------------------------------------------------------------------

++++
    <div id="adblock" class="row no-gutters adblock">
      <div class="doc-example mb-3">
        <button type="button" class="btn btn-secondary btn-raised">Primary</button>
        <button type="button" class="btn btn-secondary btn-raised">Secondary</button>
        <button type="button" class="btn btn-success btn-raised">Success</button>
        <button type="button" class="btn btn-info btn-raised">Info</button>
        <button type="button" class="btn btn-warning btn-raised">Warning</button>
        <button type="button" class="btn btn-danger btn-raised">Danger</button>
        <button type="button" class="btn btn-link btn-raised">Link</button>
      </div>
    </div>
++++

++++
<div class="">
  <div class="floating-div">
    <p>This "floating div" could be a form, a call to action, an ad,
      or whatever other content you want to float in sidebar as the user
      scrolls up and down the page.
    </p>
  </div>
</div>
++++

Welcome to the pages of J1 Template. If your here first time,
hopefully you get on that page first. For sure, there is no better
place to step in.

Having a menu system is great. We hope the the navigator module of J1 will
support you to explore this site, find what your are looking for. The site
of J1 has grown over the last month a lot. Many documents were seeking for
a home. And we have really a bunch of them.

To get better orientated, the site is organized for *natural reading*. As we
use the English language for our international vistors (we are German),
*natural reading* means for a western language, reading from the left to the
right (LTR), and from top to down a page. The same to all menus, sections
and pages.

Welcome to the pages of J1 Template. If your here first time,
hopefully you get on that page first. For sure, there is no better
place to step in.

Having a menu system is great. We hope the the navigator module of J1 will
support you to explore this site, find what your are looking for. The site
of J1 has grown over the last month a lot. Many documents were seeking for
a home. And we have really a bunch of them.

To get better orientated, the site is organized for *natural reading*. As we
use the English language for our international vistors (we are German),
*natural reading* means for a western language, reading from the left to the
right (LTR), and from top to down a page. The same to all menus, sections
and pages.
Welcome to the pages of J1 Template. If your here first time,
hopefully you get on that page first. For sure, there is no better
place to step in.

Having a menu system is great. We hope the the navigator module of J1 will
support you to explore this site, find what your are looking for. The site
of J1 has grown over the last month a lot. Many documents were seeking for
a home. And we have really a bunch of them.

To get better orientated, the site is organized for *natural reading*. As we
use the English language for our international vistors (we are German),
*natural reading* means for a western language, reading from the left to the
right (LTR), and from top to down a page. The same to all menus, sections
and pages.

++++
<style>

  .adblock {
  }

  .adblock-fixed {
    position: fixed;
  }

  .sidebar {
    width:33.33%;
    float:left;
    padding: 0 10px;
  }

/*
  .floating-div {
    background-color: #333;
    padding: 10px 50px;
    color:#EEE;
    font-size: 20px;
    margin-top:10px;
    position: absolute;
    right: -40px;
  }
*/
  .floating-div {
      background-color: #333;
      /* padding: 10px 50px; */
      color: #EEE;
      font-size: 20px;
      /* margin-top: 10px; */
      /* position: absolute; */
      /* right: -40px; */
  }

  .sticky {
    position: fixed;
    top: 150px;
    right:-40px;
    margin: 0;
    width:calc(33.33% - 25px);
  }

  .abs {
    position: absolute;
    bottom: 10px;
    right:10px;
    width:calc(33.33% - 20px);
  }
</style>

<script>
  $(document).ready(function() {
    var dependencies_met_core = setInterval(function() {
      if (j1.getState() == 'finished') {
        // variables
        var main_content      = $('.js-toc-content');
        var m                 = $(main_content).offset().top;
        var topPosition       = $('.floating-div').offset().top - 10;
        var floatingDivHeight = $('.floating-div').outerHeight();
        var footer            = $('#j1_footer');
        var footerFromTop     = $('#j1_footer').offset().top;
        var absPosition       = footerFromTop - floatingDivHeight - 20;
        var win               = $(window);
        var floatingDiv       = $('.floating-div');

        win.scroll(function() {
          if (window.matchMedia('(min-width: 768px)').matches) {
            if ((win.scrollTop() > topPosition) && (win.scrollTop() < absPosition)) {
              floatingDiv.addClass('sticky');
              floatingDiv.removeClass('abs');

            } else if ((win.scrollTop() > topPosition) && (win.scrollTop() > absPosition)) {
              floatingDiv.removeClass('sticky');
              floatingDiv.addClass('abs');

            } else {
              floatingDiv.removeClass('sticky');
              floatingDiv.removeClass('abs');
            }
          }
        });
        clearInterval(dependencies_met_core);
      }
    }, 25);
  });
</script>
++++