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

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

toc:                                    true
advertising:                            true

permalink:                              /pages/public/learn/fad/
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
// -----------------------------------------------------------------------------

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.

== Orientation

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>

  .advertising {
    display: none;
  }

  .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 logger = log4javascript.getLogger('fad.scrollSpy');

        var $window             = $(window);
        var $navbar             = $('nav.navbar');
        var $attic              = $('.attic');
        var $main_content       = $('.js-toc-content');
        var $adblock            = $('#adblock');
        var $footer             = $('#j1_footer');

        var pageHeight          = $window.height();
        var pageHeightOuter     = $window.outerHeight();

        var atticHeight         = $attic.height();
        var atticHeightOuter    = $attic.outerHeight()
        var navbarHeight        = $navbar.height();
        var navbarHeightOuter   = $navbar.outerHeight()

        var footerHeight        = $footer.height();
        var footerHeightOuter   = $footer.outerHeight();
        var footerFromTop       = $footer.offset().top;

        var adFromTop           = $adblock.offset().top;
        var adblockHeight       = $adblock.height();
        var adblockHeightOuter  = $adblock.outerHeight();

        var a                   = $adblock.offset().top;
        var m                   = $main_content.offset().top;
        var h                   = $attic.length ? $attic.height() : 0;
        var n                   = $navbar.length ? $navbar.height() : 0;

        var fixPosition         = navbarHeight;
        var absPosition         = fixPosition - 10;

        $window.scroll(function() {
          var scrollPos = $(document).scrollTop();

          logger.info('document scroll pos detected as: ' + scrollPos + 'px');

          if ($window.scrollTop() > fixPosition) {
            $adblock.show();
            $adblock.addClass('adblock-fixed');
//          $adblock.css('top', 80);
            $adblock.css('top', fixPosition);
          } else if ($window.scrollTop() < absPosition) {
            $adblock.removeClass('adblock-fixed');
            $adblock.removeAttr('style');
            $adblock.hide();
          } else {
            $adblock.removeClass('adblock-fixed');
            $adblock.removeAttr('style');
            $adblock.hide();
          }
        });
        clearInterval(dependencies_met_core);
      }
    }, 25);
  });
</script>
++++