Often see this effect in the Web page, when the page scrolls a distance, a part of the page is fixed in an area (usually head navigation), this effect is commonly referred to as the Sticky header, as shown in:
The above operation is very good in Android system, only need to listen to the onscroll event and write the implementation logic in it, but iOS is not the same, it will not execute the code when the page scroll, until the page stops.
As a result, the above effect is more difficult to implement, because the position of the navigation bar cannot be updated in real time, so the user experience is inconsistent with the Android system. After reviewing the data, we have probably found some solutions:
Position:sticky is a new style in CSS3 that behaves like position:relative position:fixed a collection, and when the target area is visible in the screen, it behaves as if the position:relative; page is scrolling beyond the target area, and it behaves as if position:fixed it were pinned to the target location. Like what:
. Header { position:-webkit-sticky; position:sticky; top:0 }When the header scrolls out of the visual window, it performs a position:fixed operation and locates the position in the top:0. When the header is re-appearing inside the viewport, it performs a position:relative operation that looks like the element is still in its original position.
The above is tested by 3GS real machine and tested. Test code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"> <Metahttp-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> <Divclass= "banner">Banner</Div> <Divclass= "header">Navigation</Div> <Divclass= "Content">A young man is 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 is all he wanted. As graduation day approached, the awaited signs that he father had purchased the car. Finally, on the morning of he graduation, his father called him to his private study. His father told him how proud he is to has 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 m An ' s name is 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 were very successful in business. He had a beautiful home and a wonderful family, but realizing HIs father were very old, he thought perhaps he should go to see him. He had not seen him since this graduation day. Before he could make the arrangements, he received a telegram telling him him father had passed away, and willed all of hi s possessions to his son. He needed to come home immediately and take care of things. When he arrived in his father's house, sudden sadness and regret filled his heart. He began to search through he 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 is 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 is the date of his graduation, and the words ... "PAID in full". How many times do we miss blessings because they is not packaged as we expected? Do not spoil, what are you having by desiring? But REMEMBEr that and now has been once among the things you only hoped for. Sometimes we don t realize the good fortune we have or we could has because we expect "the packaging" to be different. What's appear as bad fortune could in fact being the door that's just waiting to be opened.</Div></Body></HTML>
If you want to perform logical operations in real-time in Onscroll, the above code is out of the box and can only find another solution.
Implementing the Sticky header in iOS
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
