当前位置: 动力学知识库 > 问答 > 编程问答 >

android - sticky header function not well

问题描述:

when scrolling down header should not be visible, just after scrolling up header will be visible. my code work for iPhone well but on other mobile devices like samsung, nexus.... it don't. while scrolling down it shows my sticky header and this what i don't want.

any ideas how i can solve thos problem?

Snippet:

$(function () {

var lastPos = 0;

$(window).scroll(function() {

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

if (pos > lastPos || pos == 0) {

// scroll down

$(".backButton").attr('data-position','');

} else {

// scroll up

$(".backButton").attr('data-position','fixed');

}

lastPos = pos;

});

});

.backButton {

background-color: rgba(255,255,255,0.9);

border: 1px solid #000;

border-width: 0 0 1px 0;

box-sizing: border-box;

overflow: hidden;

text-transform: uppercase;

z-index: 100;

margin: 0 auto;

position: absolute;

top: 0;

left: 16px;

right: 16px;

max-width: 100%;

webkit-transform: translate3D(0, 0, 0);

-ms-transform: translate3D(0, 0, 0);

transform: translate3D(0, 0, 0);

}

.backButton[data-position=fixed] {

left: 16px;

position: fixed;

right: 16px;

top: 0px;

width: auto;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="backButton">

<a href="#" class="backLink">BACK</a>

</div>

分享给朋友:
您可能感兴趣的文章:
随机阅读: