使用js或jq控制一个div，当滚动到页面顶部的时候固定在顶部，离开可继续滚动吗？

Posted 2023-04-12

参考技术A 代码：
•$(function()

•//获取要定位元素距离浏览器顶部的距离

•var navH = $(".nav").offset().top;

•//滚动条事件

•$(window).scroll(function()

•//获取滚动条的滑动距离

•var scroH = $(this).scrollTop();

•//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定

•if(scroH>=navH)

•$(".nav").css("position":"fixed","top":0);

•else if(scroH<navH)

•$(".nav").css("position":"static");

•

•)

•)

滚动到页面顶部 - livewire 组件 - alpine js

【中文标题】滚动到页面顶部 - livewire 组件 - alpine js

【英文标题】：scroll to top of page - livewire component - alpine js

【发布时间】：2021-05-13 19:31:53

【问题描述】：

我有一个使用 laravel livewire 创建的应用程序，我正在加载一个带有多个嵌套组件的 livewire 组件，这些组件一次显示一个，具体取决于状态变量。当显示每个嵌套组件时，页面将滚动到底部。我希望默认滚动到顶部。在我尝试过的嵌套组件的顶部：

x-data x-init="window.scrollTo(0, 0)"

我还尝试在隐藏组件 1 和显示组件 2 之前使用单击事件将页面滚动到顶部。这是为了确保在显示组件 2 之前页面滚动到顶部。

x-data x-on:click.document="window.scrollTo(0, 0)"

这两种方法都行不通。提前致谢。

【参考方案1】：

我意识到我需要滚动的不是窗口，而是窗口内的<div>。因此，使用解决方案 2，在单击按钮以显示下一个组件（并隐藏当前组件）之后，我滚动到 div 的顶部。当下一个组件显示时，包含的 div 滚动到顶部。

我仍然宁愿不需要实现此解决方法，但不确定在显示下一个组件时如何防止 div 滚动到底部。