紐約時報用於在屏幕的右下方彈出一個覆蓋圖,它將提供類似故事的鏈接等。我想知道做這件事的最佳方法是什麼?你有一個隱藏的div,並在Javascript中激活了一段時間後?通過CSS/Javascript底部右覆蓋
0
A
回答
0
延遲會的工作,但使用這種類型的接口把它綁滾動位置的大多數新聞網站 - 當你接近底部,顯示的元素。使用window's scroll event來確定用戶何時位於屏幕底部的x%範圍內,然後將div動畫到視圖中。
真的,真的基本的快速和骯髒的:
window.onscroll = function {
var D = document;
var height = Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
var pos = window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
if (pos/height > .8)
document.getElementById('bottom_popover').style.display = '';
}
1
你有一個隱藏的div開始,絕對定位:
<div class="bottomMsg" stlye="display:none">My stuff!</div>
CSS:
.bottomMsg {
width:100px;
bottom:0px;
right:100px;
position:absolute;
}
JS:我在這裏使用jQuery的一個不錯的淡入效果。該計時器使用毫秒4000 = 4秒。
window.setTimeout(function() {
$('.bottomMsg').fadeIn('slow')
},4000)
相關問題
- 1. 頁腳覆蓋iframe的底部
- 2. BottomAppBar覆蓋漢堡菜單底部
- 3. 覆蓋CSS底部邊框長度
- 4. Android ChatActivity底部LinearLayout覆蓋ScrollView可滾動區域的底部
- 5. 通過web.config覆蓋WebClientProtocol.Timeout
- 6. 通過@Import覆蓋Spring @PropertySource
- 7. CSS幫助覆蓋底部的頂部部分
- 8. 的EditText具有頂部/底部layou_margin已經覆蓋了softinput
- 9. 設置li的底部邊框以覆蓋ul-tab導航的底部邊界
- 10. CSS中心div覆蓋覆蓋頂部
- 11. 浮動左右底部
- 12. MooTools:抓到底部右邊
- 13. UILabel底部和右邊界
- 14. 底部表格行右移
- 15. 通過點擊一個png覆蓋在Flash播放器頂部
- 16. 如何通過窗體控件部分覆蓋一個picturebox
- 17. 通過部署描述符覆蓋會話管理
- 18. Spree覆蓋部分
- 19. 外部CSS覆蓋
- 20. 通過覆蓋抗抑鬱成分?
- 21. 通過REST API覆蓋結果
- 22. 通過ContentControl的ContentPresenter覆蓋元素
- 23. 通過UIColor上的類別覆蓋+ [groupTableViewBackgroundColor]
- 24. JQuery通過對話框覆蓋
- 25. 在Java Swing中通過JLabel覆蓋JButton?
- 26. 如何通過JUnit覆蓋塊捕獲
- 27. 通過自動覆蓋數據
- 28. 通過UIImageview覆蓋UIImageview保存
- 29. 是否可以通過XBAP覆蓋HTML?
- 30. 通過shields.io徽章添加SonarQube覆蓋
'位置:absolute'涉及頁面。 'position:fixed'與視口有關(不會滾動出視圖)。 –