无法获取滚动时位置：固定 - 元素从屏幕上消失 [英] unable to get the scroll when position:fixed -- elements disappears form the screen
问题描述
顶部栏（固定） - 如在Twitter和Facebook上看到的，试图模仿一个web项目，我的工作相同 - 无论我尝试多少，内容消失，滚动.Tried这个教程< a href =http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/ =nofollow> http://www.sohtanaka.com/web -design / facebook-style-footer-admin-panel-part-1 /
Top Bar (fixed) - As seen on twitter and facebook,tried to mimic the same on a web project that i'm working on -- no matter how much i try,the content disappears beyond scroll.Tried this tutorial http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/
但是，当分辨率改变时缩放。不想要 - 正如我们在twitter / FB上看到的 - 想要缩放（或更低分辨率）的滚动。
but,the contents in that overlaps when resolution is changed or when on zoom.Do not want that -- as we see on twitter/FB - want the scroll to come up on zoom (or lower resolutions)
2天没有积极的结果。
Been flocking around this issue since 2days with no positive outcome.
这是我从教程编辑的测试代码 -
Here is the test code that i've edited from the tutorial --
<html>
<style type="text/css">
#footpanel {
position: fixed;
top: 0; left: 0;
z-index: 9999;
background: #e3e2e2;
border: 1px solid #c3c3c3;
border-top: none;
width: 100%;
height: 25px;
}
#footpanel ul {
padding: 0; margin: 0;
float: left;
width: 100%;
list-style: none;
border-bottom: 1px solid #fff; /*--Gives the bevel feel on the panel--*/
}
#footpanel ul li{
padding: 0; margin: 0;
float: left;
position: relative;
}
#footpanel ul li a{
padding: 5px;
float: left;
height: 16px; width: 36px;
text-decoration: none;
color: black;
position: relative;
}
#footpanel a.home{
width: 50px;
padding-left: 40px;
border-right: 1px solid #bbb;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel a.chat{
width: 126px;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
padding-left: 40px;
text-indent: 0; /*--Reset text indent since there will be a combination of both text and image--*/
}
#footpanel li#chatpanel, #footpanel li#alertpanel { float: right; } /*--Right align the chat and alert panels--*/
</style>
<div id="footpanel">
<ul id="mainpanel">
<li><a href="#" class="home">A </a></li>
<li><a href="#" class="profile">B </a></li>
<li><a href="#" class="editprofile">C </a></li>
<li><a href="#" class="contacts">D </a></li>
<li><a href="#" class="messages">E </a></li>
<li><a href="#" class="playlist">P </a></li>
<li><a href="#" class="videos">V </a></li>
<li id="alertpanel"><a href="#" class="alerts">S</a></li>
<li id="chatpanel"><a href="#" class="chat">F (<strong>18</strong>)</a></li>
</ul>
</div>
</html>
发生了什么 - 在缩放（或更低的分辨率）脚踏板的内容出来我可以防止这种溢出：隐藏，但这不是我想要的）容器（footpanel）
What is happening -- on zoom(or lower resolution) the contents of the footpanel is coming out (i can prevent this with overflow:hidden , but that's not what i want) of the container(footpanel)
我想要什么 - 像twitter /
What i want it to do -- like twitter/FB,i want a scroll to come in and the footpanel to save its layout and not fall out of place.
请帮助
- CSS初学者
Please help --CSS beginner
推荐答案
我不能想到一个方法在纯CSS和Twitter似乎使用Javascript来实现这种效果。
I can't think of a way to do this in pure CSS and Twitter seems to use Javascript to achieve that effect.
首先，在 #footpanel 上设置相同的 min-width body 。您还可以将各种项目的高度设置为 auto 或em等效项，以便在缩放和文字调整时可以很好地调整大小。
First, set the same min-width on #footpanel and the body. You may also want to set the heights of your various items to auto or em equivalents so they resize nicely on zoom and text resize.
然后将此Javascript放在您的网页上：
Then put this Javascript on your page:
<script type="text/javascript">
function hscrollbar() {
/* First, we need the horizontal scroll position of the viewer's display,
but there are different ways to call it in JS depending on browser.
I'm using the if/else shorthand notation to detect if a call is legit:
somevar = (statement) ? statement_true_value : statement_false_value */
var left =
/* window.pageXOffset should work for most recent browsers: */
window.pageXOffset ? window.pageXOffset :
/* If it DOESN'T, let's try this: */
document.documentElement.scrollLeft ? document.documentElement.scrollLeft :
/* And if THAT didn't work: */
document.body.scrollLeft;
/* Now that we have the horizontal scroll position, set #footpanel's left
position to NEGATIVE the value, so it APPEARS to follow the scroll: */
document.getElementById('footpanel').style.left = -left;
}
window.onscroll = hscrollbar; /* Call the function when the user scrolls */
window.onresize = hscrollbar; /* Call the function when the window resizes */
</script>
删除灰色的所有注释以取消浮动代码！
Remove all comments in gray to unbloat the code!
这篇关于无法获取滚动时位置：固定 - 元素从屏幕上消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
