Here’s a picture of what sliding top looks like:

The TAB bar in the middle is usually fixed, but when the page slides up, it is stuck at the top like Fixed. Position: sticky is used to achieve this effect, the element does not leave the document flow, but still retains the height, so this attribute is really harmless, and the effect is silky and smooth, similar to native.

In fact, many seemingly innocuous things have a big hole in the back.

Our HTML structure looks like this:

<body ontouchstart="">
    <div class="page-wrapper">
      <div id="contentA" class="content-a">
        A
      </div>
      <div class="sticky-wrap ">
        <ul class="ui-tab-nav ui-border-b frown ">
          <li class="current">recommended</li>
          <li>classification</li>
        </ul>
      </div>
      <div id="contentB" class="content-b">
        B
      </div>
    </div>
</body>Copy the code

The main CSS is as follows:

.sticky-wrap {
  top: 0;
  width: 100%;
  z-index: 999;
}
.sticky-wrap {
  position: relative;
  position: -webkit-sticky;
}
.page-wrapper.sticky .sticky-wrap {
  position: fixed;
}
.content-a {
  height: 200px;
  background-color: #12b7f5;
  color: #fff;
  font-size: 48px;
  text-align: center;
  line-height: 200px;
}
.content-b {
  height: 800px;
  font-size: 48px;
  text-align: center;
  line-height: 200px;
}Copy the code

A couple of things to note here, where sticky-wrap is we set position: -webkit-sticky; If the height of the parent element is too small, the sticky effect will appear if the parent element is too small. If the parent element is too small, the sticky effect will no longer be fixed.

Then we set top, sticky elements must have top or bottom attributes, otherwise it will not work.

In addition to some things to set, there is one thing you can’t set. The parent or ancestor of the sticky element cannot contain overflow:hidden or overflow: Auto.

Basically that’s it, and there’s a big one called “Only iOS supports this attribute.”

A similar effect is implemented on Android

Here we have to use JS and Positon :fixed.

Add a section of js:

        var isStopTimer = null;
        var offsetTop = $('.content-a').offset().height;

        // Top effect
        if ($('.sticky-wrap').css("position").indexOf("-webkit-sticky") = =- 1) {$('.page-wrapper').on('touchend'.function() {
                clearInterval(isStopTimer);
                isStopTimer = setInterval(function() {
                    document.body.scrollTop >= offsetTop ? $('.page-wrapper').addClass('sticky') : $('.page-wrapper').removeClass('sticky');
                }, 200)}); $('.page-wrapper').on('touchmove'.function() {
                document.body.scrollTop >= offsetTop ? $('.page-wrapper').addClass('sticky') : $('.page-wrapper').removeClass('sticky');
            });
        }Copy the code

$(‘.sticky-wrap’).css(“position”).indexof (“-webkit-sticky”) Then, by listening for the TouchMove and TouchEnd events, add a class called Sticky when appropriate with some styles:

.page-wrapper.sticky .sticky-wrap {
  position: fixed;
}Copy the code

When the fixed top is needed, we changed the element’s positon to fixed, but there is a pit here. When the element is set to fixed, the corresponding element is out of the document flow, that is, there is no height. When you look carefully, the element at the bottom has a jump.

In order to solve this problem, we can add a height to the following element, and then overlap it with the sticky element. In order not to affect this logic when changing the page in the future, it is better to calculate the height with JS.

Add the following code:

        var tabContentTop = $('.ui-tab-nav').offset().height;
        var orgPaddingTop = parseInt($('.content-b').css('padding-top'));
        $('.content-b').css('padding-top', tabContentTop+orgPaddingTop);
        $('.sticky-wrap').css('margin-bottom', -tabContentTop);Copy the code

Here we use padding-top to add height to content-B and negative margin-bottom to make content-B overlap with sticky-wrap. Instead of overwriting the padding-top value of the content-b, it’s best to get it and add it to it, using parseInt.

By this point, I have basically trudgedout the Android effect, although it is not as smooth and comfortable as iOS, but it is barely acceptable.

Finally, debug sticky, since it is only supported by iOS, you should have Safari first, but it doesn’t work normally, go to the development menu and select responsive design mode

Source code address: github.com/bob-chen/de…

conclusion

I haven’t posted any articles for a long time. I have been too busy recently. I don’t know if I have worked overtime and even got sick.

twitter

Record some thoughts and thoughts, write science and technology and humanities, write life conditions, write reading comprehension, mainly bullshit and comprehension, welcome attention, exchange.

Wechat official number: poem and distance of programmer

Public ID: Monkeycoder-Life