位置固定但仍可滚动?

时间:2015-06-09 23:18:28

标签: javascript css

是否可以拥有DIV位置:固定,但如果该DIV的内容超出屏幕的查看区域,那么您仍然可以使用窗口滚动?我把迄今为止的所有内容都放在了......

FIDDLE

此代码位于媒体查询中,当屏幕达到最大宽度和/或最大高度时会触发,但我不认为该代码与我的问题相关。这是我认为需要修改才能正常工作的代码:

.expand {
    display: block !important; 
    position: fixed;
    -webkit-backface-visibility: hidden;
    top: 50px;
    left: 0;
    background: rgba(31, 73, 125, 0.8);
    width: 100%;
    z-index: 999;
}

我想要这个固定的原因是因为小汉堡菜单始终静止地保持在屏幕的左上角,因为我建筑的网站有时可能相当冗长,所以我想观众可以更方便地访问。

谢谢!

1 个答案:

答案 0 :(得分:3)

是的,你只需要给div一个固定的高度和@Html.ActionLink("Create Loan", "Create", "LoanController", new { id = "123" }, null) 设置

Demo

overflow: auto

如果你不想给它一个最小高度,一个简单的(但not supported by old browsers)选项就是使用css .expand { bottom: 0; overflow: auto; } 这样

calc()

如果浏览器不支持calc

,我建议先设置一个后备高度

<强>的JavaScript

要实现您真正想要的,您需要javascript。在这里。

检查菜单是否打开,如果不是......

  • 定义检查以查看内容是否大于视口,如果是,则设置.expand { max-height: calc(100% - 50px); // 100% viewport height minus the height of the nav. } bottom: 0px;并删除正文中的滚动。

如果是这样......

  • 从打开菜单时添加的菜单和正文中删除所有样式。

Demo

overflow: auto