[練習]切版 科技島讀 7/19~7/21

#7/19
花一天的時間切出 70%，
差 slide-showing menu、
頁面滾動超過一定的範圍浮現的 top bar、
下方 fixed footer bar。

top bar 教學：
https://www.minwt.com/webdesign-dev/js/8891.html

#7/20
top bar 直接套用失敗了，只好自己想辦法生。

下方 fixed footer bar 做伸縮效果花好多時間，
尤其為了只讓 bar 區域游標維持 pointer，所以沒把整個 bar height拉高，而是分割，
試了margin-bottom 在 click 時增加而向上推移，
但第二次 click 為了要讓它向下，
賦予一個暫時用 id (或 class) 再將 margin 改回來，沒有成功。
最後成功結果如下，文字再回彈卻沒有顯現：

$(function () {

$('#getmoreclick').hide();

$('.fixedfooter')

.click(function (e) {

if ($('.fixedfooter').css('marginBottom') === '358px') {

$('.fixedfooter').animate({

marginBottom: '0px'

}, 500);

$('.getmore img').attr('src', 'pic/up-arrow-footer.png');

$('.getmore p').css('opacity', '1');

} else {

$('.fixedfooter').animate({

marginBottom: '358px'

}, 500);

$('.getmore img').attr('src', 'pic/down-arrow-footer.png');

$('.getmore p').css('opacity', '0');

}

if ($('#getmoreclick').css('display') === 'block') {

$('#getmoreclick').slideUp(500);

$('.getmore p').hide();

} else {

$('#getmoreclick').slideDown(500);

}

});

});

#7/21
找到另一個 top bar 教學，
只要能讀取得到網頁滑動高度，就有辦法做！

取得 body 捲動後高度 JS & jQuery：
http://www.eion.com.tw/Blogger/?Pid=1154

照此方法 5分鐘搞定！太適合自誇了！！

$(function () {

$('#top-bar').hide();

$(window).scroll(function () {

var scrollH = $(this).scrollTop();

if (scrollH > 205) {

$('#top-bar').slideDown(500);

} else {

$('#top-bar').slideUp(500);

}

});

});

最後是 slide-showing menu 與 整份間距微調，即大功告成！
slide-showing menu 已經邊改邊想到腦袋疲乏，決定尋覓高人指點學功夫，
間距懶得調了，先眠去補充體力。本次切版決定告一段落！