使用 jQuery 滚动功能创建一个粘性标题,有时在特定高度(我猜)当我向下滚动时,返回到页面顶部。
记录了这个:http://take.ms/s9mGh8
这是我的功能:
$(window).scroll(function(e){
$('#main').toggleClass('fixed', $(this).scrollTop() > $('#header').height()+25);
});
我该如何解决这个问题?
最佳答案
问题是固定元素不占用 DOM 中的空间。所以这里发生的是你的标题占用空间,你滚动页面,用 position:fixed
设置标题,所以它不再占用空间,你所有的元素向上移动,滚动条消失。
为防止这种行为,您需要在更改类时将“缺失高度”添加到文档中。 StickyKit 使用的常用技术例如,如果要添加占位符 div。
您可以在此处查看基本代码:https://jsfiddle.net/jaL765t1/
var flag = false;
$(window).scroll(function(e){
var passed_point = $(this).scrollTop() > $('#header').height()+25;
if(passed_point && !flag){
var surrogate = $('<div>', {
'class' : 'js-surrogate',
css : {
height : $('#header').height()
}
});
$('#header').before( surrogate );
$('#main').addClass('fixed');
flag=true;
}else if(!passed_point && flag){
$('#main').removeClass('fixed');
$('#header').prev('.js-surrogate').remove();
flag=false;
}
});
当然,这段代码不好,但您可以轻松地将其用作起点。
关于javascript - jQuery 窗口滚动,向下滚动返回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40268604/