標籤：was ini nes finally div des called nbsp 集合
經常在網頁中看到這樣一種效果，當頁面滾動一段距離後，頁面中的某個部分固定在一個地區(通常是頭部導航)，這種效果一般稱為Sticky Header，如所示：
上述操作在Android系統中非常好實現，只需要監聽onscroll事件並將實現邏輯寫在裡面即可，但iOS則不一樣，它在頁面scroll的時候，是不會執行代碼的，直到頁面停下來為止。
如此一來上面的效果就比較難實現了，因為不能即時更新導航條的位置，所以使用者體驗會與Android系統不一致。經過查閱資料，大概找了幾種解決方案：
position:sticky是CSS3中新增的樣式，它的表現相當於position:relative和position:fixed的集合，當目的地區域在螢幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目的地區域時，它的表現就像position:fixed，它會固定在目標位置。比如：
.header{ position:-webkit-sticky; position:sticky; top:0 }
當header滾動出可視視窗外時，它就會執行position:fixed操作，並定位在top:0的位置。當header重新出現在視口內時，它執行position:relative操作，看起來就像元素仍然在原來的位置。
以上經過3GS真機測試並且測試通過。測試代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Sticky Header for iOS</title> <style> body{ margin: 0; color: #ffffff; } .banner{ height: 100px; background-color: #3b9a90; } .header{ height: 30px; line-height: 30px; background-color: #daac76; position: -webkit-sticky; position: sticky; top:0; } .content{ background-color: #557b4d; height: 900px; padding: 10px; line-height: 24px; text-indent:2em; } </style></head><body> <div class="banner">banner</div> <div class="header">navigation</div> <div class="content">A young man was getting ready to graduate from college. For many months he had admired a beautiful sports car in a dealer‘s showroom, and knowing his father could well afford it, he told him that was all he wanted. As Graduation Day approached, the young man awaited signs that his father had purchased the car. Finally, on the morning of his graduation, his father called him into his private study. His father told him how proud he was to have such a fine son, and told him how much he loved him. He handed his son a beautiful wrapped gift box. Curious, but somewhat disappointed, the young man opened the box and found a lovely, leather-bound Bible, with the young man‘s name embossed in gold. Angrily, he raised his voice to his father and said, "With all your money you give me a Bible?" He then stormed out of the house, leaving the Bible. Many years passed and the young man was very successful in business. He had a beautiful home and a wonderful family, but realizing his father was very old, he thought perhaps he should go to see him. He had not seen him since that graduation day. Before he could make the arrangements, he received a telegram telling him his father had passed away, and willed all of his possessions to his son. He needed to come home immediately and take care of things. When he arrived at his father‘s house, sudden sadness and regret filled his heart. He began to search through his father‘s important papers and saw the still new Bible, just as he had left it years ago. With tears, he opened the Bible and began to turn the pages. As he was reading, a car key dropped from the back of the Bible. It had a tag with the dealer‘s name, the same dealer who had the sports car he had desired. On the tag was the date of his graduation, and the words... "PAID IN FULL". How many times do we miss blessings because they are not packaged as we expected? Do not spoil what you have by desiring what you have not; but remember that what you now have was once among the things you only hoped for. Sometimes we don‘t realize the good fortune we have or we could have because we expect "the packaging" to be different. What may appear as bad fortune may in fact be the door that is just waiting to be opened.</div></body></html>
如果要在onscroll裡即時執行邏輯操作，以上代碼就力不從心了，只能找別的解決方案。
在iOS中實現sticky header
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
