页面滚动到以下位置:固定内容 [英] Page Scroll under position: fixed content

问题描述

我有一个位置固定的顶部导航区域

I have a top navigation area with position: fixed

我希望页面内容正常滚动，但不要在导航下消失.主要问题是当我执行搜索时(这是一个完整的CMS，在不同模块中具有成百上千个结果)，我正在搜索的内容有时会在导航下滚动.我可以接受它，因为我知道发生了什么，但是我希望它对我的用户有效.我想我可以使用框架集，但是还有另一种方法吗?

I'd like the page content to scroll normally, but not disappear under the navigation. The main issue is when I do a search, (this is a full CMS with hundreds of results in different modules) what I'm searching for sometimes gets scrolled under the navigation. I'm ok with it because I know what's happening, but I'd like it to work well for my users. I suppose I could use a frameset, but is there another way?

除了我的内容div的margin-top:50px外，我基本上输入了您输入的内容.问题是，内容div与页面一起滚动，因此一旦页面开始滚动，我就会有50px的隐藏内容.如果我执行浏览器搜索(Ctrl-F)，则尤其明显.我已经解决了打印问题，使用@print样式表删除了导航区域，但我希望仅在导航下方进行滚动.

I basically have what you typed up except I have a content div with margin-top: 50px. The problem is, the content div scrolls with the page so I have 50px of hidden content once the page starts to scroll. This is especially apparent if I do browser searches (Ctrl-F). I've solved the printing issue with a @print stylesheet removing the nav area, but I'd like to have the scrolling occur only below the nav.

我正在考虑尝试:

body {
overflow: no-scroll; (or whatever the css is for this)
}

#content {
overflow: scroll;
}

这可能会摆脱浏览器的滚动条，仅在内容区域显示一个滚动条.不知道会是什么样子.仍然不理想.看起来就像没有框架烦恼的框架.

This might get rid of the browser scroll-bar and only have one for the content area. Not sure how that will look. Still less than ideal. It'll probably look just like a frameset without the frameset annoyances.

推荐答案

可能并非万无一失，但您可以做到

May not be foolproof, but you could do

body {
  position: relative;
  top: <whatever height your navigation bar is>;
}

然后您的导航元素将具有

Then your navigation element would have

#nav {
  position: fixed;
}

结合起来，这应该将body下的所有内容都降低，除了那些具有position: fixed或position: absolute的元素.

Combined, this should bump everything under body down, except for those elements that have position: fixed or position: absolute.

这篇关于页面滚动到以下位置:固定内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！