S+!ky bv++0N
suapaya sekayan pelapung-lapung
by Shah Danial
HTML
<div class="headline-meta" id="headline_meta">
<span class="vcard author"><span class="fn" title="Shah Danial"><a href="https://plus.google.com/111370918386182195497" rel="author" title="author profile">by Shah Danial</a></span></span>
<time datetime="2015-06-28T06:29:00+08:00"><abbr class="published updated" title="2015-06-28T06:29:00+08:00">Sunday, June 28, 2015</abbr></time>
<p>
If this element unvisible, button will be sticky. When this element visible back, button also relocate. Muah i love u
</p>
</div>
<h1 class="social-shares">BUTTONS
</h1>
<!-- below is nothing -->
<div class="text">
Didalam gerimis penuh rahmat
Hamba tersungkur
Dalam kehangatan hubungan yang menggoda, dia(nafsunya) tersungkur
Cendawan akrab sesegar pagi
nan permai damaikan
Cendawan akrab (perempuan tahu apa cendawan yang bersifat akrab) sesegar pagi nan permai damaikan (dah lembap/basah, menggambarkan ianya tergoda/terangsang)
Tunggul dipinggir rimba lantas mendambakan cinta sempurna dari jiwa bakal suriku.
Tunggul (lelaki tahu apa yang bersifat tunggul dan di pinggir semak)
lantas mendambakan cinta sempurna dari jiwa bakal suriku (Stim dan mengidamkan layanan dari cendawan dan kecintaan yang hadir melalui hati kekasihnya)
---
Didalam kelambu, mendung ungu
hamba kesali.
Didalam kelambu, mendung ungu (menggambarkan mereka telahpun berasmara hinggakan seakan mendung ungu jadinya kelambu tu setelah di gegarkan)
Lalu bila kepuasan dah 'terkeluar'. Kekesalan lahir di hati kecil memikirkan keterlanjuran tersebut tak sepatutnya)
Kilahan kayangan, pedoman, ikhtiar dan arah
Hidayah pedoman baru diambil kisah(bisikan baik). baru nak terfikir untuk ikhtihar mencari arah kerana telah terlanjur
Persis diriku tak mengangankan hidup sederhana
menyamai hari-hari mimpi-mimpinya.
Dirinya tidak pernah terfikir hidup yang terkandas dek hawa nafsu demikian. Hidup yang kurang kerahmatan
--
Sendiri meratapi sekalungan sengsara
dan menelan sisa, pahit mahu madah pujangga,
Sendiri tanggung...
CSS
.social-shares { width: 100%; height: 40px; background-color: #3b5997; border-color: #3b5997; }
body { min-height: 900px}
.headline-meta { width: 100%; background-color: #d34837; color: #ffffff; height: 200px; display: block; }
.headline-meta a, .social-shares { color: #ffffff }
.text { font-style: italic; }
/* FIXED */
.fixed_button { position: fixed; bottom: 0;}
JavaScript
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('.headline-meta').offset().top;
var div_height = $('.headline-meta').outerHeight();
var danial = $('.social-shares');
var danial_height = $('.social-shares').innerHeight();
if (window_top > div_top + div_height + danial_height) {
$(danial).addClass('fixed_button');
}
if (window_top < div_top + div_height) {
$(danial).addClass('').removeClass('fixed_button');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});