当您在桌面屏幕上滚动时，Div 跟随，并在移动屏幕上修复

Question

当您在比 991 宽的屏幕上时，我希望在滚动时有一个div 跟随。在较小的屏幕尺寸上，我想要div 修复。我希望每次有人加载页面或调整页面大小时都会刷新 javascript 代码。

这是我的代码(它不干...

我的问题是当我调整窗口大小时(桌面屏幕 -> 移动屏幕 ->桌面屏幕... 1 - 在移动屏幕上，我无法进入页面底部 2 - 在桌面屏幕上，滚动页面时出现问题

//when the page is load and the window resize detect if it's a smallscreen
var smallscreen = true;
$(window).on("resize load", function() {
if ($(window).width() > 991) {
smallscreen = false;
}
else {
smallscreen = true;
};
//if it's not a small screen activate the scrolling
if (smallscreen == false) {
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(window);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
}
else {
$this.css({
position: 'fixed',
top: 180
});
};
});
};
$('#checkout_validation').followTo(400);
}
else {
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(window);
$window.on("resize scroll load", function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'initial',
width: '100%',
top: 0
});
}
else {
$this.css({
position: 'initial',
width: '100%',
top: 0
});
};
});
};
$('#checkout_validation').followTo(0);
};
});

Answer 1

这是我的工作代码。谢谢你@iMatoria把它弄干了。

//when the page is load and the window resize detect if it's a smallscreen
var smallscreen = true;
$.fn.followTo = function(pos) {
var $this = this,
$window = $(window);
$window.on("resize scroll", function(e) {
function positionByScreen(positionForBiggerScreen, topOffsetForBiggerScreen) {
if (smallscreen == false) {
//alert('bigcreen scroll end');
$this.css({
position: positionForBiggerScreen,
top: topOffsetForBiggerScreen
});
} else {
//alert('smallscreen no scroll end ');
$this.css({
position: 'inherit',
top: 0
});
}
}
if ($window.scrollTop() > pos) {
positionByScreen("absolute", pos);
} else {
positionByScreen("fixed", 180);
};
});
};
$(window).on("resize load", function() {
smallscreen = !($(window).width() > 991);
//if it's not a small screen activate the scrolling
$('#checkout_validation').followTo(smallscreen ? 0 : 400);
//var d = document.getElementById("checkout_validation");
//d.className += " otherclass";
});