Question

Ohai！

我想在我的网站上为我的菜单添加一些效果。这是我想要创建的事件：
1-用户加载页面：菜单距离页面顶部36px;
2-用户开始向下滚动以阅读内容;
3-当用户正好滚动36px时，菜单移动到页面的最顶部并保持在那里;
4-用户继续向下滚动，菜单仍然固定在最顶端;
5-用户向上滚动直到达到顶部不到36px，菜单返回到他的第一个位置，距离顶部36px。

这很有趣，我只是注意到Stack Overflow正在使用一些代码与我在编写新问题时页面右侧的“类似问题”框完全相同。如果您想要概述，只需start creating a new question并观看即可。我试图找出他们正在使用的东西，但失败了。

为了我的效果，我使用了与scrollTop()关联的scroll() jQuery属性。这是代码：

$(document).scroll(function() {
        if ($(document).scrollTop() >= 36) {
        $('#menu').css({'top': '0px'});
        } else {
        $('#menu').css({'top': '36px'});
        }
        });

这适用于document，这意味着整个页面。

现在问题是我想在具有article属性的overflow-y :scroll元素中使用它。当我在谈论<article>元素时，我指的是HTML5文档中使用的元素（例如<nav>，<aside>，<section>，{{1} } ...）。

结果，JQ在<footer>中找不到任何滚动，这是真的，因为现在，整个页面中唯一的滚动位于document元素内。身体永远不会移动，这是预期的。

所以我尝试了这个：

article

还有这个：

$('article').scroll(function() {
        if ($('article').scrollTop() >= 36) {
        $('#menu').css({'top': '0px'});
        } else {
        $('#menu').css({'top': '36px'});
        }
        });

即便如此：

$(document).scroll(function() {
        if ($(document).scrollTop() >= 36) {
        $('#menu').css({'top': '0px'});
        } else {
        $('#menu').css({'top': '36px'});
        }
        });

$('#insidecontent').scroll(function() { if ($('#insidecontent').scrollTop() >= 36) { $('#menu').css({'top': '0px'}); } else { $('#menu').css({'top': '36px'}); } });是跟随#insidecontent元素的div的名称，因为您稍后会在Jsfiddle.net给我的代码中看到。

这不起作用。不是因为article元素，我正在使用另一个jQuery代码来动态调整高度，这也正在集中article而没有任何问题。我试过没有它。

http://jsfiddle.net/fKkML/1/
在这里，您可以找到包含第一个版本（article）和而不是 $(document)的整个代码，以查看我正在谈论的效果。它正常工作，只需滚动结果框。

http://jsfiddle.net/BCuez/7/
此处打开了overflow-y: scroll的版本和overflow-y: scroll，这是无效的。

注意：在第二个链接中，溢出由Jsfiddle.net以相同的方式处理，似乎这是滚动的整个主体。但正如你所看到的，无论如何效果都会被搞砸。您可以通过创建文件在计算机上本地试用此代码，您将看到。

注意2：我必须在这些演示中向$('article')添加margin-top: 70px，但在实际代码和整个代码中都不需要。{/ p>

注3：我是HTML5 / CSS3的“专业”用户，但jQuery的不，这是我第一次在Web的帮助下自己制作JQ代码。我是这个主题的非常菜鸟，所以如果你能详细说明你的答案以帮助我正确理解它，我会非常感谢你。

我在发布之前在这里搜索答案。例如，我发现this subject与我有点相关，但不是真的。我没有发现任何真正可以帮助我的东西，或者与我的相同。

非常感谢你给我的帮助。我愿意接受其他方法来获得相同的结果，但这一点似乎非常接近工作。

Answer 1

我解决了这个问题。

第一个问题是设置为height的{{1}}因为我有另一个动态改变其大小的JS代码。需要定义auto（px，em，％）。

第二个问题是一开始就缺少height。 JSFiddle自己添加了它，我只需要用Chrome中的F12检查代码。我把它添加到我自己的代码中，它正在工作。

以下是您可以自己使用的最终代码：

jQuery的：

window.onload=function(){

CSS：

window.onload=function(){
    $('article').scroll(function () {
        if ($('article').scrollTop() >= 36) {
            $('#menu').css({
                'top': '0px'
            });
        } else {
            $('#menu').css({
                'top': '36px'
            });
        }
    });
    }

HTML：

article {
    width: 100%;
    height: 500px;
    overflow-y: scroll;
    position: relative;
    z-index: 0;
}

<body> <ul id="menu"> <li> <a href="#"> Elem1 </a> </li> <li> <a href="#"> Elem2 </a> </li> <li> <a href="#"> Elem3 </a> </li> <li> <a href="#"> Elem4 </a> </li> <li> <a href="#"> Elem5 </a> </li> </ul> <article> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend neque in sodales iaculis. Suspendisse porta sodales turpis, ut bibendum justo sagittis at. Vivamus ut laoreet tellus. Integer rutrum vel quam in imperdiet. Cras mattis lacus sem, eu suscipit urna adipiscing et. Etiam convallis, tortor ac gravida luctus, nibh tellus porttitor lorem, vel tempus massa purus sed orci. Donec condimentum dolor velit, convallis auctor velit dapibus sed. Integer commodo ullamcorper libero, in pharetra tortor auctor nec. Donec tristique turpis quis felis posuere feugiat. Fusce molestie elementum gravida. Nulla nec quam et metus gravida ornare eget ac elit. Morbi sit amet massa ornare, euismod dolor fringilla, porttitor felis. Sed mattis orci ante, nec sodales enim varius non. Proin velit justo, ultrices vel mollis id, ultrices a nibh. Aenean lacinia ullamcorper leo, sed adipiscing libero vestibulum nec. Phasellus est erat, tincidunt vel mi non, condimentum vestibulum lacus. Quisque placerat id mauris a hendrerit. Phasellus venenatis eros vel leo blandit, non blandit velit imperdiet. Praesent id erat in risus tristique iaculis a eget orci. Quisque pellentesque hendrerit ante vitae tincidunt. Vivamus placerat nisi purus, a tincidunt ligula elementum ut. Integer in arcu elit. Phasellus facilisis orci sit amet sapien egestas imperdiet. Ut quis risus sodales, rutrum libero rhoncus, tincidunt ipsum. Praesent suscipit eros id lacinia bibendum. Donec erat sem, fringilla et pulvinar nec, aliquet euismod mi. </article> </body>是设置article的全部内容。
overflow-y: scroll是滚动时更改位置的DIV。
#menu是用户在DIV改变其位置之前需要滚动的px的数量。
>= 36是DIV的位置。
0px是当滚动小于36px时DIV的位置。

您可以在jQuery代码中添加所需的每个CSS规则。例如，我添加了一行来隐藏同一事件中的某些内容。您还可以添加36px事件。

祝你好运！

当滚动带有overflow-y：scroll的DIV时，使用scrollTop（）移动DIV

1 个答案: