如何使固定位置菜单旁边的内容在较小的分辨率下不重叠
How to make content next to a fixed-position menu not overlap in smaller resolutions
我正在尝试弄清楚如何做到这一点,以便如果用户的浏览器窗口低于大约 1024px(该网站没有水平滚动 1024px+(,如果他们确实向右滚动以查看更多主要内容,它不会被左侧固定位置菜单重叠/凌乱。
我做了一个JS小提琴,重现了我面临的基本问题:http://jsfiddle.net/YE7ZZ/1/
.CSS
#wrap {
width:100%;
background-image:url('../images/Imagine/bg_image44.png');
background-attachment:fixed;
}
#top {
}
#left {
position:fixed;
border:1px solid red;
background:pink;
width:250px;
}
#positioner {
margin-left:250px;
width:auto;
}
#content {
border:1px solid green;
width:700px;
margin:auto;
background:grey;
}
.HTML
<div id="wrap">
<div id="top"></div>
<div id="left">menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br /></div>
<div id="positioner">
<div id="content">asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
asdf content that should be lower-resolution browser friendly and not be overlapped by the menu<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
在过去的六周中,我尝试了大约三次解决此问题,但无法找到解决方案,因此任何帮助将不胜感激。
谢谢你的时间。
编辑 - 我理想的解决方案是为内容部分显示一个水平滚动条,以便他们可以滚动内容本身,而不必:1(重叠左侧菜单;或 2( 切断可见内容的数量;或 3( 减小左侧菜单的大小
已解决:非常感谢@Gaby又名G.彼得里奥利
我使用了这个javascript解决方案:
$(document).ready(function(){
var lastLeft = -1,
menu = $('.left_, .top_');
$(window).on('scroll resize', function(){
var left = $(window).scrollLeft();
if (left >= 0 && left!==lastLeft){
lastLeft = left;
menu.css('left',-left+'px');
}
});
}(;
并按照他的概述更改了CSS,在我的实时版本中,必须将一些顶级菜单元素的位置从固定更改为绝对。非常感谢大家!
不确定您的特定需求,但您可以从.content
规则中删除width:700px
,以便该元素将像视口一样缩小。
http://jsfiddle.net/YE7ZZ/2/演示
另一方面,如果您需要维护布局,并且您希望fixed
仅适用于垂直滚动,则必须使用一些jquery(纯CSS无法实现(
var lastLeft = -1,
menu = $('#left');
$(window).on('scroll resize', function(){
var left = $(window).scrollLeft();
if (left >= 0 && left!==lastLeft){
lastLeft = left;
menu.css('left',-left+'px');
}
});
http://jsfiddle.net/YE7ZZ/3/演示
不确定它是否正是您想要/需要的,但您也可以使用 id="positioner" 对div 使用绝对定位。只需将您的左边距:250px 替换为
position: absolute;
left: 250px;
right: 0;
overflow: auto;
我修改了一点小提琴。您可以在此处找到新版本
您可以使用浮点数执行此操作。如果您希望容器 (#wrap( 拾取高度,则可能需要使用 clearfix。
这里有一个小提琴:http://jsfiddle.net/EqXBp/
.CSS:
#left {
float: left;
border:1px solid red;
background:pink;
width:250px;
}
#content {
border:1px solid green;
float: right;
width: calc(100% - 4px);
margin:auto;
background:grey;
}
根据屏幕/视口的宽度更改 CSS。
将此添加到您的头上:
<meta name="viewport" content="initial-scale=1">
根据大小更改 css 规则:
@media screen and (min-width : ###px) and (max-width : ###px) {
.your-css-here{
}
}
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
在此过程中,您可以更改固定导航菜单以不同的方式显示。
即:
@media screen and (max-width : 1024px) {
nav{
position:relative;
etc...:...;
}
}
编辑---有max/min-device-width
.需要max/min-width
.
这是一个非常简单的修复,现在我明白你想要什么。只需使您的positioner
包装器绝对并设置其标记并告诉它滚动即可。
#positioner {
position: absolute;
top: 0px;
left: 250px;
right: 0px;
bottom: 0px;
overflow: auto;
}
首先,您必须了解固定位置的工作原理。它是相对于屏幕视口的位置,滚动时不会移动。
以下解决方案相对设置左侧框的样式,但使其行为固定。
将以下内容添加到您的 CSS 中:
#wrapp {
min-width: 955px;
}
#left {
position: relative;
float: left;
width: 250px;
top: 0;
}
#positioner {
position: relative;
float: left;
margin-left: 0;
}
使用此Javascript程序将左侧菜单保持在顶部:
<script>
function scrollTop() { return document.body.scrollTop || document.documentElement.scrollTop; }
$( document ).ready(function() {
$(window).scroll(function() {
$("#left").css({ top: scrollTop() + 'px' });
});
});
<script/>
- 如何将屏幕分辨率乘以 80%,然后在代码中使用
- HighCharts长标题文本在某些元素上重叠
- 检测图像分辨率
- 如何检测重叠元素下的单击
- 停止较大单词的重叠
- FullCalendar:事件发生时阻止重叠.标题是一样的
- 在页脚处停止固定侧边栏-防止重叠
- JS图表和html表格重叠
- 如何根据分辨率添加像素
- Cordova AngularJS Ionic标签的内容在第一次加载时重叠
- 在不同的屏幕和分辨率上跟踪鼠标并将其关联起来
- 将多个重叠的透明图像保存为一个图像
- 悬停时显示更高分辨率的图像
- 重叠对象上的HTML画布事件
- 根据屏幕分辨率显示自定义背景图像
- 当静态元素与滚动上的固定元素位置重叠时进行检测
- 如何使图像适合TD,而不需要包装在不同的屏幕分辨率上
- 三星电视支持多分辨率
- HTML全页缩放取决于屏幕分辨率
- 如何使固定位置菜单旁边的内容在较小的分辨率下不重叠