Question

我正在创建一个单页滚动网站，其中包含一些具有固定背景和固定项目的文章，仅在该文章中显示。我目前是基于滚动像素的固定元素（如下所示）

$(document).scroll(function() {
$('#portslider').toggle($(this).scrollTop() < 4295);
});

我认为这解决了我只想在自己的文章中只展示固定元素的问题。然而，一旦我开始致力于使网站响应，我意识到这是行不通的。其他一些文章需要根据屏幕宽度更改长度，这会更改所有项目需要隐藏的像素长度。

因此，该网站在屏幕尺寸超过2300px时看起来很棒，然后当你缩小并且文章改变尺寸时，固定元素（婚礼，生活，冒险等等）不再隐藏在正确的滚动长度。

我想到的一些想法但未能弄清楚如何继续：

您可以在此处查看该网站：http://s416809079.onlinehome.us/ （仍在建设中，还有很多尚未完成，到目前为止在Firefox中的最佳视图）

谢谢！

Answer 1

假设你有一个像：

这样的DOM

<body>
     <article id="article1">[article in here]</article>
     <article id="article2">[article in here]</article>
</body>

（这些也可以是<div>标签...），无论如何，你都可以做这样的事情来将toggle设置在正确的高度。（您可能必须根据盒子模型，填充，边距等调整像素）：

 $(document).scroll(function(){
     $('#portslider').toggle($(this).scrollTop() < $('#article2').css('top'));
 });

这样，无论文章“顶部”的像素位置是什么，#portslider都会正确显示。（您可能还需要收听window.resize事件......）