固定位置侧边栏到JS
固定位置侧边栏是指在网页布局中，将侧边栏固定在页面的某个位置，使其在滚动页面时保持固定不动的效果。这样可以提供更好的用户体验，让用户随时访问侧边栏的内容，无需滚动到页面顶部或底部。
固定位置侧边栏通常使用JavaScript来实现。以下是一个简单的实现示例：
<!DOCTYPE html>
<html>
<head>
<style>
.sidebar {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 200px;
background-color: #f1f1f1;
padding: 20px;
}
</style>
</head>
<body>
<div class="sidebar">
<h2>Sidebar</h2>
<p>This is a fixed sidebar.</p>
</div>
<div style="margin-left:200px;">
<h1>Main Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisl a aliquet lacinia, nunc arcu fringilla est, sed ultrices velit metus vel nunc. Nulla facilisi. Sed in nunc auctor, tincidunt enim id, tincidunt nisl. Sed id metus at erat tincidunt aliquet. Donec euismod, nunc a aliquam tincidunt, felis nunc venenatis nunc, ac ultrices nunc mi in nunc. Aenean vitae enim at sapien cursus lacinia. Sed vel semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed tristique, nisl ut tincidunt tincidunt, nunc sapien finibus nunc, in gravida lectus nisl a sem. Sed id mi nec nunc finibus lacinia. Integer ut ligula nec nunc malesuada tristique. Mauris nec justo auctor, aliquet nisl sed, lacinia orci.</p>
</div>
</body>
</html>在上述示例中，通过将侧边栏的position属性设置为fixed，并使用top和left属性来控制侧边栏的位置。transform: translateY(-50%);用于垂直居中侧边栏。通过设置width、background-color和padding属性，可以对侧边栏进行样式设置。
固定位置侧边栏适用于需要在页面中提供常用功能链接、导航菜单或其他重要信息的场景。例如，在一个博客网站中，可以将侧边栏用于显示最新文章、分类导航、标签云等内容，方便用户快速访问。
腾讯云提供了多种产品和服务，可以帮助开发者构建和部署云计算应用。具体推荐的产品和产品介绍链接地址可以参考腾讯云官方网站的相关文档和页面。
相关·内容
我遇到的情况是，当用户向下滚动时，侧边栏的一部分会得到固定的位置，但是当我捕捉到这个位置并将固定的css应用到侧边栏元素时，它会固定到整个屏幕，而不仅仅是父级(这是侧边栏)
我如何正确地设置它？
浏览 2提问于2012-07-11得票数 7
回答已采纳
2回答
我有这个侧边栏，位置是通过JS设置的。基本上，当页面滚动时，它必须留在原处，然而，当它到达容器的末尾时，它就会离开。我怎样才能保持(固定的) div不会离开容器？
浏览 27提问于2017-01-16得票数 0
2回答
所以我用Adminlte固定的布局。问题是我只想要边栏固定，而不是头。所以我删除了这个位置:固定在主标头上。
.fixed .main-sidebar{}
因此，现在我在js中添加了一个函数来计算位置，并相应地添加填充。它有点工作，但它的
浏览 2提问于2018-10-26得票数 0
回答已采纳
1回答
我有侧边栏块，位置固定。如何解决这个问题，快速滚动窗口时的问题，或者，建议是否有js插件？更新：(侧边栏不应重叠页脚)
浏览 4提问于2013-03-05得票数 3
回答已采纳
1回答
我有一个带有固定位置侧边栏的页面。我希望侧边栏是可滚动的情况下，它的内容太高，不适合在浏览器窗口。然而，当我用overflow-y: scroll设置侧边栏的样式时，滚动条出现了，但是它被禁用了，因为侧边栏足够高来容纳所有的内容，即使它对于浏览器窗口来说太高了。有没有办法限制固定位置元素的高度，使其在内容扩展到浏览器窗口底部以下时滚动？
我的应用程序可以接受jQu
浏览 1提问于2013-03-27得票数 2
回答已采纳
3回答
Semantic-UI在其上警告说，“固定位置内容在侧边栏出现时可能会出现更改位置的问题。”然后，它为该问题提供了两种可能的解决方案。令人惊讶的是，在同一个页面和整个网站上，Semantic-UI的网站使用了一个固定的顶部菜单，当左边栏被触发时，该菜单可以很好地调整。我想简单地创建一个固定的顶部菜单，就像语义UI的网站使用的那样，当侧边栏打开时，它会进行适当的调整。然而，这被证明是令人沮丧的困难，因为两个提出的解决方
浏览 0提问于2014-05-22得票数 3
2回答
我的网站有一个边栏，里面有很多东西，所以浏览器视图必须有至少1020像素的高度才能看到它，而不必滚动(当然，除非你放大)。我希望侧边栏的位置是固定的，这样当你在一个页面上有很多内容，侧边栏保持在与你滚动相同的位置。但是如果我调整浏览器窗口的大小，侧边栏就会被切断。当我滚动浏览页面的内容时，我可以看到页面的所有内容，但是由于其位置固定，侧边栏仍然被
浏览 8提问于2011-06-09得票数 6
回答已采纳
5回答
我知道div的定位(固定的、绝对的和相对的)。我可以附加一个固定的div到身体，这样它将坚持到相同的位置，而滚动身体。在这里，我提出了一个有点不同的问题。我有一个侧边栏，高度高于视口高度，我希望它被固定在身体上。在滚动身体的同时，它也应该滚动，但一旦底部的固定div可见，它就不应该随着身体滚动。例如，Facebook墙的右侧侧边栏与body一起滚动，并在右侧侧边栏
浏览 3提问于2014-09-23得票数 7
回答已采纳
1回答
我有一个固定位置的导航栏，以及在移动设备上打开侧边栏菜单的按钮。只有在IOS和Safari上，当你点击购物车或账户时，侧边栏才不会显示。显然，这是某种兼容性问题，但我如何解决或修复这个问题？我在StackOverflow上看到其他一些线程说，这是因为Webkit translate不能在固定位置的父级中工作，所以我从代码中删除了translate all，以避免重新排列HTML.现在，我使用JS在单击时将左值从-10
浏览 22提问于2019-07-11得票数 0
我有一个有固定滚动边栏的页面。当在侧边栏中悬停其中一个按钮时，我想在按钮旁边显示一个弹出/工具提示。然而工具提示比侧边栏要大，所以它需要突出。这似乎与其可滚动有关。如果我删除溢出-y:滚动从侧边栏，工具提示开始工作，但当它是可滚动的，它不工作。如果我使用边距将侧边</e
浏览 5提问于2014-01-10得票数 1
回答已采纳
3回答
我按照在线教程/说明，通过使侧边栏位置“固定”来设置侧边栏的固定位置，它工作得很好。现在我意识到，由于我的页面有一个最小宽度属性，当用户横向滚动时，没有移动的内容会移到侧边栏中。所以基本上，我正在寻找一种方法，当你向下滚动时，产生一个固定的侧边栏，但当你横向移动时，内容不会跳到侧边栏中。
浏览 2提问于2012-07-07得票数 0
回答已采纳
我希望创建一个侧边栏沿着相同的路线，当侧边栏是在完整的视图，我需要它成为位置:固定到页面底部，否则是位置:相对。(减去点击，我只希望它在滚动时发生)。
我对JS不太在行，所以不确定我的想法是否正确？
浏览 0提问于2015-07-08得票数 1
3回答
正在尝试创建具有固定位置的侧边导航栏(仅限高度)<div style={{ display: "flex" }}> style={{ height:"100vh&q
浏览 1提问于2019-08-26得票数 0
我在一个传统的网站布局(页眉-content和边栏页脚)上使用了Twitter bootstrap的侧边栏。我认为这与JS有关，可能是删除了affix类。有什么解决方案/建议吗？
浏览 0提问于2012-11-16得票数 5
回答已采纳
在父div中设置了两个div-左侧的侧边栏和右侧的内容区域。我需要将内容区域(具有固定宽度)的位置设置为始终位于侧边栏右侧的15px (即使浏览器窗口/侧边栏正在伸展)。设置侧边栏的position: absolute &a% width对侧边栏本身非常有效，但是由于侧边栏的位置是绝对的，所以内容无法识别<em
浏览 2提问于2013-05-16得票数 0
回答已采纳
3回答
首先，这个修复可以在JS或CSS中进行，只要它能工作，就不重要了。我需要的是:一个脚本，它检测某个元素的高度(在本例中是#侧栏)，并修改要匹配的#内容的最小高度。或有关此功能的实时版本，请查看
不
浏览 4提问于2013-09-10得票数 0
回答已采纳
1回答
具有响应内容的固定可折叠左侧边栏
、、、、
我的目标是在左边有两个固定和可折叠的侧边栏，并在侧边栏崩溃/展开时在右边有主要内容“跟随”。但是让我们一步一步地前进。我希望左边是可折叠的固定侧边栏，当侧边栏被折叠时，主内容(在侧边栏的右边)被展开。
这里的问题是边栏有一个固定的位置</
浏览 3提问于2017-09-27得票数 0
回答已采纳
3回答
左边的侧边栏是固定的使用位置:固定的，所以它保持不变时，滚动下来。在台式机上没问题。我怎么才能修好它？将侧边栏固定在桌面上，并使其在移动上响应？
浏览 2提问于2013-12-17得票数 2
回答已采纳
我不确定标题是否有意义，但我注意到在wordpress 3.8.1管理面板中，如果您将窗口调整到侧边栏阻止查看的菜单项的位置，这是正常的定位，允许侧边栏滚动。如果所有的项目都可见，那么侧边栏就有固定的位置，所以只有侧边栏右侧的内容才会滚动。我在想它需要jQuery来添加一个类或者改变css。也许如果侧边栏中的最后一项是可见的，那
浏览 2提问于2014-03-22得票数 0
3回答
iOS8上新的固定位置错误
、、、、
我有一个固定的标题和滑出侧栏的网站。在纵向的iOS7中，当侧边栏可见时，固定的标题保持不变，但在iOS8上，标题会稍微向上推动，这取决于您向下滚动的程度。我需要把它修好。查看jsbin：侧边栏固定在屏幕的左侧，最初是通过向左平移自身宽度来隐藏的。要打开侧边
浏览 0提问于2014-10-16得票数 9
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
