Line 2: | Line 2: | ||
<html> | <html> | ||
<body> | <body> | ||
+ | <script> | ||
+ | var scrollFloat = function() { | ||
+ | 'use strict'; | ||
+ | |||
+ | var app = {}; | ||
+ | |||
+ | app.init = function init(node) { | ||
+ | if (!node || node.nodeType !== 1) { | ||
+ | throw new Error(node + ' is not DOM element'); | ||
+ | } | ||
+ | handleWindowScroll(node); | ||
+ | }; | ||
+ | |||
+ | function handleWindowScroll(floatElement) { | ||
+ | window.onscroll = function() { | ||
+ | if (window.scrollY > floatElement.offsetTop) { | ||
+ | if (floatElement.style.position !== 'fixed') { | ||
+ | floatElement.style.position = 'fixed'; | ||
+ | floatElement.style.top = '0'; | ||
+ | } | ||
+ | } else { | ||
+ | if (floatElement.style.position === 'fixed') { | ||
+ | floatElement.style.position = ''; | ||
+ | floatElement.style.top = ''; | ||
+ | } | ||
+ | } | ||
+ | }; | ||
+ | } | ||
+ | |||
+ | return app; | ||
+ | }(); | ||
+ | |||
+ | var el = document.getElementById('float-block'); | ||
+ | scrollFloat.init(el); | ||
+ | </script> | ||
<style type="text/css"> | <style type="text/css"> | ||
ul.timeline { | ul.timeline { | ||
Line 70: | Line 105: | ||
<!--BEGIN FIRST CARD--> | <!--BEGIN FIRST CARD--> | ||
− | <div class="card border-success mb-3 text-center"> | + | <div class="card border-success mb-3 text-center" id="float-block"> |
<div class="card-header"> | <div class="card-header"> | ||
<a class="card-link text-center" data-toggle="collapse" href="#collapseFIRST"> | <a class="card-link text-center" data-toggle="collapse" href="#collapseFIRST"> |
Revision as of 22:01, 17 October 2018