定位固定标题和中间部分内容问题 [英] Positioned fixed header and the middle part content issue

问题描述

我有一个流动的问题：

-------------------

header ||||| |||||||||||||

-------------------

content | ||||||||||||||||

-------------------

footer ||||||||||||||||||||

-------------------



页眉和页脚定位固定。

内容部分（分为部分）很长（每个部分长5000px） ）。

我正在尝试使用导航进行网站，而不是在点击页面时回发

导航并加载其他页面。

只会使用jquery动画并滑动到所请求的部分。



我遇到位置固定标题有问题，每次我滑到不同的部分

，隐藏内容的标题（我理解为什么 - 它正在调用页面ID然后转到那个高度，不知道标题）我需要做什么总是设置''顶部''所以内容页面将在标题下。

我认为如果我将类页的位置设置为相对并将 top 设置为某些像素就可以了（因为我认为如果我将元素定位为绝对，固定，相对于 top 被认为是自己的寡妇），不是吗？



这是导航html：

 <   div     id   =  header    class   =  shadow >  
 <   ul     id   =  nav >  
 <   li  >  <   a     href   = ＃section1 >  <   / a  >  <  < span class =code-leadattribute> / li  >  
 <   li  >  <   a     href   = ＃section2 >  <   / a  >  <   / li  >  
 <   li  >   <   a     href   = ＃section3 >  < span class =code-keyword><   / a  >  <   / li  >  
 < span class =code-keyword><   / ul  >  
 <   / div  >  

标题样式：

＃ header  {
  height  ：  20％;  
  width  ：  100％;  
  position  ： 已修复;  
 背景 ： ＃F5F6F7;  
} 

''section''样式（一个长页面分隔成各个部分）

。 section  {
  top  ：  163px;  
  height  ：  5000px;  
 宽度 ：  100％;  
  position  ：  relative;  
} 

jQuery部分：

 $（'  ＃nav a'）。bind（' 点击'，功能（事件）{
 var  $ anchor  = $（this）; 
 
 $（'  html，body'）。stop（）。animate （{
 scrollTop：$（$ anchor.attr（'  href'））。 （）。top 
}，1500，'  easeInOutExpo'）; 
 
 event.preventDefault（）; 
}）; 

我是否以正确的方式接近解决方案？

谢谢，我希望它有意义

解决方案

（' ＃nav a'）。bind（' click'，function（event）{
var

anchor =

（本）;

I have the flowing issue:
-------------------
header||||||||||||||||||
-------------------
content|||||||||||||||||
-------------------
footer||||||||||||||||||||
-------------------

The header and footer are positioned fixed.
the content part(divided to sections) is very long(each "section" is 5000px long).
I am trying to do a site with navigation that instead of post back when clicking a "page"
in the navigation and load other page.
Will only animate with jquery and ''slide'' down to the requested section.

I am having trouble with the position fixed header, each time I slide to different section
,the header hiding the content(and i understand why - it''s calling the page id and then go to that height, not knowing of the header) what I need to do is always set the ''top'' so the content page will be under the header.
I thought that if I''ll set the position of the class page to relative and set the top to some pixels it will be ok ( cause i thought that if I position element to absolute,fixed,relative the top considered to be from the widow it self), isn''t it?

This is the navigation html:

<div id="header" class="shadow">
            <ul id="nav">
                <li><a href="#section1"></a></li>
                <li><a href="#section2"></a></li>
                <li><a href="#section3"></a></li>
            </ul>
        </div>

Header style:

#header {    
    height: 20%;
    width: 100%;
    position: fixed;
    background: #F5F6F7;
}

''section'' style(one long page separated to sections)

.section {
    top: 163px;
    height: 5000px;
    width: 100%;
    position: relative;
}

jQuery part:

$('#nav a').bind('click', function (event) {
               var $anchor = $(this);

               $('html, body').stop().animate({
                   scrollTop: $($anchor.attr('href')).offset().top
               }, 1500, 'easeInOutExpo');

               event.preventDefault();
           });

Am I approaching that solution the right way?
Thanks, I hope it make sense

解决方案

('#nav a').bind('click', function (event) { var

anchor =

(this);

这篇关于定位固定标题和中间部分内容问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！