Div随着你在桌面屏幕上滚动,并在移动屏幕上修复
问题描述:
当你在991以上的屏幕上滚动时,我想要一个div滚动。在屏幕尺寸较小时,我想要修复div。我希望在每次有人加载或调整页面大小时刷新javascript代码。Div随着你在桌面屏幕上滚动,并在移动屏幕上修复
在这里我的代码(它不干...)。
我的问题是,当我调整窗口的大小(桌面画面 - >手机屏幕 - >桌面画面...): 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);
};
});
答
这是我工作的代码。感谢@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";
});
+0
@iMatoria我刚刚发现了一个代码中的问题当我第一次加载页面时移动的元素参数是(位置:固定; 顶部:180px;),我需要调整大小或滚动以适用正确的参数我试图添加“加载”5行,但它不工作。 (“调整大小滚动”,功能(e)) – Blueone
您可以删除smallerscreen的代码,只需使用CSS将其固定即可。桌面移动'$(window).on(“resize load”''。$ .fn.followTo'函数,同样移动其他代码,这会让你清楚的知道什么不起作用 – iMatoria
@ iMatoria感谢您的回答,如果我删除了小屏幕代码,div会一直滚动,如果我调整窗口大小 – Blueone
这就是你必须使用CSS管理的东西,你可以添加一个类,以防小屏幕和使用CSS。是非常一般的实现移动第一代码/html的方式 – iMatoria