因此，当您打开 Facebook 应用程序并向下滚动页面时，标题会从屏幕顶部滑出，然后一旦您向上滚动，标题就会向下滑动。向下滑动可以发生在文档中的任何位置，并且总是在您开始向上滚动时立即向下滑动(所以我不希望在您滚动到文档顶部时让标题向下滑动)
我有点让它工作，但如果你一遍又一遍地上下滚动，你会注意到一些标题被切断，被切断的数量是完全随机的。
这是 js，我做了一个 jsfiddle的问题
var lastScrollTop = 0;
var headerTop;
var headerTopMax;
var headerNewTop = 1;
var stMax;
$(window).scroll(function (e) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
if (st > $(".header").height())
headerTop = $(".header").height();
else
headerTop = st;
//console.log("downscroll");
$(".header").css("top", "-" + headerTop + "px");
stMax = st;
headerNewTop = 1;
console.log("headerNewTop = " + headerNewTop);
}
else {
headerTopMax = $(".header").height();
if (headerNewTop > 0) {
if (stMax % st != NaN) {
headerNewTop = headerTopMax - ((stMax % st) + 1);
$(".header").css("top", "-" + headerNewTop + "px");
}
}
console.log("stMax % st = " + ((stMax % st) + 1));
console.log("headerTop = " + headerTop);
console.log("headerTopMax = " + headerTopMax);
console.log("headerNewTop = " + headerNewTop);
console.log("stMax = " + stMax);
}
lastScrollTop = st;
});
谁能帮我弄清楚为什么要这样做。 干杯
最佳答案
好的，我想通了，似乎有一种更简单的方法可以做到这一点。良好的 OL CSS 转换为胜利;)
HTML:
<body style="height: 1000px;">
<div class="header container-fluid scrollEffect" style="width: 100%; background: #ececec; text-align: center;vertical-align: middle;">
<img src="http://www.logopeople.com.au/blog/wp-content/uploads/2011/11/free-australia-logo-design.jpg" width="150px" alt="" />
</div>
</body>
CSS:
.header {
position: fixed;
top: 0;
max-width: 100%;
}
.header.scrollEffect {
transition: top linear 0.5s;
-webkit-transition: top linear 0.5s;
-moz-transition: top linear 0.5s;
-o-transition: top linear 0.5s;
}
JS:
var headerTop;
var lastScrollTop = 0;
$(window).scroll(function (e) {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
if (st > $(".header").height())
headerTop = $(".header").height();
else
headerTop = st;
$(".header").css("top", "-" + headerTop + "px");
}
else {
$(".header").css("top", "0px");
}
lastScrollTop = st;
});
这是我更新的 js fiddle所以你可以看到它的实际效果:)
关于javascript - 从Facebook的移动应用程序复制标题滚动效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50868778/