个人中心
gpt4 book ai didi

overflow - 当 DIV 溢出-y :scroll is scrolled 时，使用scrollTop() 移动 DIV

转载 作者：行者123 更新时间：2023-12-02 21:57:29 25 4
gpt4 key购买 nike

哎呀!

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

这很有趣，我刚刚注意到 Stack Overflow 使用一些代码来执行与我编写新问题时页面右侧的“类似问题”框完全相同的操作。如果您想了解概览，只需 start creating a new question并观看它。我试图找出他们在使用什么，但失败了。

为了达到我的效果，我使用了 scrollTop() jQuery 属性，关联到 scroll()一。这是代码:

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

这适用于 document ，表示页面的整个主体。

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

结果，JQ在document中没有找到任何卷轴。这是真的，因为现在整个页面中唯一的滚动条位于 article 内。元素。 body 永远不会移动，这是有意的。

所以我尝试了这个:

$('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 的名称它遵循 article元素，您稍后将在我将通过 Jsfiddle.net 提供给您的代码中看到。

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


http://jsfiddle.net/fKkML/1/
在这里您可以找到包含第一个版本 ( $(document) ) 和没有 overflow-y: scroll 的完整代码。 ，看看我正在谈论哪种效果。它正在工作，只需在结果框中滚动即可。



http://jsfiddle.net/BCuez/7/
这里是 overflow-y: scroll 的版本打开并 $('article') ，这不起作用。

注意:在第二个链接中，Jsfiddle.net对溢出的处理方式相同，看起来这是整个正文在滚动。但正如你所看到的，效果还是很糟糕。您可以通过创建文件在本地计算机上尝试此代码，您将会看到。

注2:我必须添加margin-top: 70px至article在这些演示中，但在真实的完整代码中不需要。

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

在发布此内容之前，我已经在这里搜索了答案。例如我发现this subject与我的有点相关，但不是真的。我没有找到任何真正可以帮助我或与我的相同的。



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

最佳答案

我解决了这个问题。

第一个问题是 height 被设置为 auto 因为我有另一个动态改变其大小的 JS 代码。需要定义高度(px、em、%)。

第二个问题是一开始就缺少window.onload=function(){。 JSFiddle 自己添加的，我只需在 chrome 中用 F12 检查代码即可。我将它添加到我自己的代码中，它正在工作。

这是您可以自己在自己的代码中使用的最终代码:

jQuery:

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

CSS:

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

HTML:

<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的全部内容。

  • #menu是滚动时位置改变的DIV。

    • 第三行中的

  • >= 36 是 DIV 更改位置之前用户需要滚动的像素数。

  • 第5行0px是滚动等于或高于36px时DIV的位置。

  • 第9行36px是滚动在36px以下时DIV的位置。

您可以在 jQuery 代码中添加您想要的每条 CSS 规则。例如，我添加了一行来隐藏同一事件中的某些内容。您还可以添加 animate() 事件。

祝你好运!

关于overflow - 当 DIV 溢出-y :scroll is scrolled 时，使用scrollTop() 移动 DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17509201/

25 4 0
文章推荐： wpf - 使用静态资源设置窗口图标
文章推荐： jmeter - 连接变量并创建 MD5
文章推荐： regex - 如何使用正则表达式在列表中每个匹配项的第一次出现周围添加 `\macro{}`
文章推荐： templates - 如何在 meteor 中仅渲染一个模板实例
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com