- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
假设我在浏览器窗口中有一个右键菜单:
___________________________
| Right |
content | Menu |
| |
| |
| |
| |
| |
| |
| |
___________________|_______|
我希望菜单固定,以便用户在向下滚动时看到相同的内容。所以我设置了 position:fixed 用于右侧菜单。
但是,我也希望如果窗口太小则看不到菜单。即窗口应在右侧菜单之前显示完整内容。
像这样:
_________________________
| Ri |
content | Me |
| |
| |
| |
| |
| |
| |
| |
___________________|____|
有没有办法在纯 css 中做到这一点?如果不是,一个非常简单的 js 修复?
编辑:
我有一个相关的问题,所以我觉得没有必要创建另一个问题:
我的右侧菜单有固定宽度,但我需要左侧内容相应地自动调整其宽度(填满左侧)。有没有办法在 css 中执行此操作并保留上述功能?
最佳答案
如果您知道内容的尺寸,则可以改用以下内容:
position:fixed; left:800px;
而不是:
position:fixed; right:0;
如果说您的内容是 800 像素宽。这意味着您的计算是从左侧进行的,如果用户窗口小于该窗口,菜单将推出屏幕。
看来您的要求如下:
我建议使用 JavaScript 来解决这个问题,你可以用纯 CSS 来实现它,但是将你的菜单放在一个覆盖整个页面的固定层中。虽然这里的逻辑在现代浏览器中有效——由于对菜单容器上方的内容进行 z 索引——我不想看到旧的用户代理会如何处理它:
CSS
/* make sure our content doesn't collapse too small */
.content {
position: relative;
z-index: 20;
min-width: 700px;
margin-right: 200px;
}
/* place our menu container across the entire page */
.menu-container {
position: fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* a layer that mimics what our content does */
.menu-offset {
position: relative;
min-width: 700px;
margin-right: 200px;
height: 100%;
}
/* finally the menu attached to the right of the menu offset */
.menu-content {
position: absolute;
width: 200px;
height: 100%;
left: 100%;
background: #ddd;
}
标记
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
adipiscing magna sed ipsum convallis vel fringilla nibh viverra.
Nulla et ligula vel urna scelerisque imperdiet a et lectus.
Nunc commodo, nibh id blandit mollis, leo quam eleifend urna,
at rhoncus turpis justo sit amet erat. Quisque tempus nunc
vitae eros fringilla eget imperdiet neque tincidunt. Donec
ac posuere diam. Nam nibh nibh, sollicitudin non blandit ut,
auctor in dolor. Nullam lobortis condimentum consequat.
</p>
<p>
Maecenas at orci massa, quis congue mauris. Vivamus varius
tincidunt nunc, eget <a href="#canyouclickthis">pellentesque arcu
faucibus</a> ac. Suspendisse rhoncus orci eu felis consectetur
rutrum. Nullam sed mauris eros. Nunc dignissim, libero dapibus
consectetur lobortis, ante urna faucibus dui, vel luctus metus
leo id magna. Pellentesque mi ligula, commodo ac pellentesque
et, auctor sed neque. Phasellus dapibus tellus faucibus dui
vehicula hendrerit. Pellentesque habitant morbi tristique
senectus et netus et malesuada
fames ac turpis egestas.
</p>
</div>
<div class="menu-container">
<div class="menu-offset">
<nav class="menu-content">Menu</nav>
</div>
</div>
对于以上内容,我希望较旧的浏览器要么进行渲染,以便您无法与内容 div 中的任何内容进行交互——请参阅 #canyouclickthis
链接——要么不支持 position:fixed
无论如何都是正确的:
啊,刚刚发现您关于 80%
宽度的评论。对上述内容的修改可能适用于此,但是,当您有一个固定宽度的菜单时,最好避免使用百分比宽度——尤其是在您指定的条件下——并改为依赖 min 和 max-width。或者使用具有百分比宽度而不是固定宽度的菜单。
根据您拥有/想要设置标记的方式,以下方法可能有效。这种方法依赖于这样一个事实,即如果您不指定 left
、top
、bottom
或 right
层应该留在原处(在旧浏览器中不是 100% 正确)。您可能会发现必须为不太现代的 UA 定义 .menu
层的维度。该解决方案具有不覆盖固定层中的整个页面的额外好处:)
.content { position:relative; width:80%; min-width: 800px; float:left; }
.menu-container { position:absolute; left:100%; top:0; }
.menu-content { position: fixed; width:20%; height:100%; background:#ddd; }
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
adipiscing magna sed ipsum convallis vel fringilla nibh viverra.
Nulla et ligula vel urna scelerisque imperdiet a et lectus.
Nunc commodo, nibh id blandit mollis, leo quam eleifend urna,
at rhoncus turpis justo sit amet erat. Quisque tempus nunc
vitae eros fringilla eget imperdiet neque tincidunt. Donec
ac posuere diam. Nam nibh nibh, sollicitudin non blandit ut,
auctor in dolor. Nullam lobortis condimentum consequat.
</p>
<div class="menu-container">
<nav class="menu-content">Menu</nav>
</div>
</div>
同样,最好在 Internet Explorer 之类的工具中对此进行测试,因为我无权访问该特定用户代理 atm。
关于javascript - 如何使元素位置固定但又离开窗口?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16204237/
在开发中的网页上,我在 IE 上遇到此错误 element = $(element); 此代码位于prototype.js 预期对象 如何消除此错误。 更新: 现场也使用了 jQuery。 最佳答
我有两个大小相同的嵌套数组: Array1 =[[1, 2], [], [2, 3]] Array2= [[1, 4], [8, 11], [3, 6]] 我需要将它们合并到一个数组中,如下所示: A
我有一些 jQuery 代码,当单击具有特定 ID 的项目时运行。当 ID 是 的一部分时,它就可以工作。元素,但当它位于 中时则不然元素。为什么会这样呢?我想使用 an,因为如果用户关闭了 Ja
Flex-box 规范 3声明 flex 元素不是 block 容器: A flex item establishes a new formatting context for its content
我遇到了一个意想不到的问题。 HTML JS $(function() { var $divs = $('.myDiv'); // create new div not in
我使用 Bootstrap 和 Ember.js 得到了一个无序列表。每个列表项都是一个显示新帖子的链接,每当您单击该链接时,Ember 都会添加类 active默认情况下。我正在使用 Bootstr
我正在尝试让一个函数正常工作,但运气不佳,所以我想向 Stackoverflow 智囊团提出一个新手问题! 基本上,我有一个表单,并且循环遍历所有元素以查看是否存在自定义数据属性。如果存在,则保持该元
我想映射一个可选数组,删除那些 nil 值,并使用另一个函数映射非 nil 值。 我知道我可以通过使用 compactMap 然后使用常规 map 来实现这一点,但我只想遍历数组一次。 我为此实现了一
我如何定位 li 元素,除非它们出现在 之后元素?换句话说,我想针对步骤而不是注释。 我尝试向 OL 添加一个我想从选择中排除的类,但我想出的代码不起作用。 (顺便说一句,重构 html 不是一种选
Warning 1 The element 'system.webServer' has invalid child element 'rewrite'. List of possible eleme
我正在尝试编写一个脚本,该脚本将遍历 HTML 源并创建 DOM 的 JSON 文件,然后使用 d3.js 在 TreeView 中显示该文件。我遇到的问题是不仅希望显示元素(TITLE、P、LI 等
我有以下 HTML 表单:- Option 1 Option 2
我试图在选定的 HTML 元素之后选择下一个具有类名 slider-value 的 span 元素。我尝试了多种解决方案,但没有一个有效。 我可以通过 id 选择它,但我不希望那样做使代码冗余。 $(
如果电子邮件地址无效,我想在屏幕上显示一条消息“请输入有效的电子邮件地址”。 body 元素的innerHTML 语句工作正常,但我用于p 元素的innerHTML 语句不起作用。 有一次,当我测试它
以下 jQuery 代码调用 ul 元素,查找元素内的前 三个 li 列表项,并隐藏剩余的 li 项目。然后,它附加一个 li 元素,其中显示“显示更多...”,并且在单击时显示之前隐藏的列表项。 (
我问了a question早些时候关于将编辑/删除链接与 h1 元素内联的最佳方法。我能够通过给出的答案实现这一点,但我现在有额外的要求,我需要在 h1 下方显示一个段落并编辑/删除链接。 到目前为止
我使用 MVC 4 和 knockout.js 库版本 2.1.0 显示从服务器检索到的大量文件的表中的以下摘录。 0)"> 正在正确检索数据,
我创建了一个脚本,该脚本在鼠标悬停在父容器上时激活,并且应该将其子元素移离鼠标。我目前已经让它工作了,但是代码的某些部分似乎与 REACT 代码应该是什么样子相矛盾。特别是两个部分。 我在渲染函数中使
我是 JS 新手,正在尝试理解项目 https://github.com/tastejs/todomvc 的代码 请参阅屏幕截图,我尝试对 button X 以及其父元素 div 设置断点,但在这两种
例如,假设有一个带有奇特颜色的标记: Something written here 使用 Visual Studio 2017 和 MVC 5 元素,有没有办法检查和定位当前应用了哪些样式,以及负责它
我是一名优秀的程序员,十分优秀!