是否可以只滚动图像而不是整个站点而没有位置：粘性？
Posted
技术标签:
【中文标题】是否可以只滚动图像而不是整个站点而没有位置：粘性？【英文标题】：Is it possible to only scroll an image rather than the entire site without position: sticky? 【发布时间】：2021-10-07 21:55:48 【问题描述】：我有一个带有标题、标题和大图的网站。
图片比网站的高度大，这是一个长期的巧合，实际上在最终效果/创意方面表现得非常好。
我想创建一个用户滚动但只有图像“滚动”/移动的滚动效果。图像的下端变得可见，而上端完全消失，正如您在滚动时所期望的那样。
这是网站结构和理念的草图：
当用户向下滚动标题时，它上面的任何内容都保持不变，没有浮动，没有奇数浮动或其他编辑。
我真的只想编辑图片 css/js/html，并想避免编辑图片上方和下方的其他元素。
这可能吗？我已经安装了 Bootstrap 和 Jquery (XAMPP/LAMP)，也许有这种效果的库？
更新（最少代码）：
<?php ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>...</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
</head>
<body class="container-fluid">
<nav class="blackbg navbar navbar-expand-lg row">
<span class="col-1"></span>
<a class="display-4 navbar_Item col-5" href="#">Item1</a>
<a class="display-4 navbar_Item col-5" href="#">Item2</a>
<span class="col-1"></span>
</nav>
<section class="spacing10percent"></section>
<h1 class="display-3 lgtext">Some nice heading</h1>
<img src="verticalImage.png" />
<script src="js/jquery.3.6.0.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<footer>
<small>Privacy Policy</small>
</footer>
</body>
</html>
【问题讨论】：
您能否添加一些最少的代码来演示您的 HTML 结构并描述为什么 position:sticky 不可能解决这个问题？ @AHaworth 添加。因为当我想阻止菜单变得粘滞时，它会产生问题，反之亦然。我也怀疑它会帮助解决这个问题，并且考虑到图像的高度，可能会产生更多问题。 （最后我真的很喜欢只将东西编辑到最低限度/没有交叉编辑/没有巨大的撤消会话等......现在还有更多的设计/结构问题......） 【参考方案1】：方法5：将img设置为background-image（用fit切换max:width: 100%）
const fit = false;
let width, height, newHeight;
$(window).on('load', function()
const src = $('img').attr('src');
width = $('img').width();
height = $('img').height();
$('img').remove();
$('<div>',
id: 'img',
css: 'background-image': `url("$src")`
).appendTo('body');
resize();
);
function resize()
let css;
if (!fit)
newHeight = height;
css =
'width': width,
'height': newHeight
;
else
newHeight = height * Math.min(width, $(window).width()) / width;
css =
'width': width < $(window).width() ? width : '100%',
'height': newHeight,
'background-size': '100% auto',
'background-repeat': 'no-repeat',
;
$('#img').css(css);
$(window).scroll(function()
const h = $(this).scrollTop();
$('body').css('padding-top', h);
$('#img').css('background-position', `0 $-hpx`);
$('#img').height(newHeight - h);
);
$(window).resize(function()
resize();
);#img
border: 1px red solid;
border-top-color: blue;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>HEADER</header>
<div class="heading"><h1>H1</h1></div>
<img src="https://via.placeholder.com/1000">方法一：包裹img（全屏预览）
header
height: 200px;
.heading
height: 100px;
.img-container
height: calc(100% - 300px);
width: 100%;
overflow: auto;
img
display: block;
max-width: 100%;
html, body
height: 95%;
<header>HEADER</header>
<div class="heading"><h1>H1</h1></div>
<div class="img-container">
<img src="https://via.placeholder.com/1000">
</div>方法二：修复img容器（背景色问题）
$('#img').css('margin-top', $('body').outerHeight(true));
$(window).scroll(function()
const st = $(this).scrollTop();
$('body').css('padding-top', st);
);#img
position: absolute;
top: 0;
z-index: -99;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>HEADER</header>
<div class="heading"><h1>H1</h1></div>
<div id="img">
<img src="https://via.placeholder.com/1000">
</div>方法3：修复容器中的img（背景颜色问题）
const d = $('img').offset().top;
$(window).scroll(function()
const a = $(this).scrollTop();
const b = $('img').height();
const c = $(this).height();
const h = a < b - c + d ? a : b - c + d;
$('body').css('padding-top', h);
$('img').css('top', -h);
$('#img').height(1000 - h);
);#img
position:relative;
z-index:-99;
img
position: absolute;
top:0;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>HEADER</header>
<div class="heading"><h1>H1</h1></div>
<div id="img">
<img src="https://via.placeholder.com/1000">
</div>方法四：用object-position滚动（img问题后的空白）
const d = $('img').offset().top;
$(window).scroll(function()
const a = $(this).scrollTop();
const b = $('img').height();
const c = $(this).height();
const h = a < b - c + d ? a : b - c + d;
$('body').css('padding-top', h);
$('img').css('object-position', `0 $-hpx`);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>HEADER</header>
<div class="heading"><h1>H1</h1></div>
<img src="https://via.placeholder.com/1000">【讨论】：
很好的答案，但还没有，图像只有在用户滚动图像时才能滚动，而不是让没有预先信息的人感到困惑的页面。 然后将有 2 个部分 i) 制作 header 和 h1 以随滚动移动，ii) 使 img 随滚动移动。你接受创建一个虚拟的“标题和 h1”吗？ 当然我不知道这意味着什么:)。您如何在进一步“移动”图像的同时同时移动图像和导航/标题？我很困惑也很困惑。此时使用粘性标题我不介意，因为我似乎找不到解决方案。我只是想不出一种方法来向下移动导航栏，夹在 h1 上（h1 现在随着导航栏的粘性移动）而不是过度滚动 img，同时向下滚动 img 滚动。 添加方法 2,3,4。 2和3类似。每种方法都有一些问题。使用 'dummy' header 和使用 header 本身也是一样的，所以我放弃了这个想法。 方法 4 看起来最接近我想要实现的目标。仅凭您的努力，您就应该得到绿色的勾号，谢谢。以上是关于是否可以只滚动图像而不是整个站点而没有位置：粘性？的主要内容，如果未能解决你的问题，请参考以下文章