问题描述：

当页面有足够的内容需要向下滚动时，页眉和菜单将消失。现在，标题不是的一个问题，但我真的很喜欢菜单保持固定在页面的顶部，同时仍然滚动内容。如何在滚动时将页面的一部分固定在顶部

在这里我发布一个网页的代码与标题和菜单

<html> 
<head> 
<noscript><meta http-equiv="REFRESH" content="0;URL=error-no-javascript.html"></noscript> 
<link rel="shortcut icon" href="http://www.vtsim.com/favicon.png" /> 
<title>TRAINZ - VTsim.com</title> 
</head> 
<body ondragstart="return false" onselectstart="return false" oncontextmenu="return false" link="red" alink="red" vlink="red"> 
<font face="Arial" size="2" color="black"> 

<p align="center"> 
<img src="http://www.vtsim.com/image/head_trz_1.png"><a href="http://fs.vtsim.com" border="0"><img src="http://www.vtsim.com/image/head_trz_2.png"></a> 
</p> 

//--- now starts the menu wich I pretend to be kept fixed on top when scrolling 

<p align="center"> 
<a href="http://trainz.vtsim.com" border="0"><img src="http://www.vtsim.com/image/b_home_a.png"></a><a href="http://trainz.vtsim.com/trains.htm" border="0"><img src="http://www.vtsim.com/image/b_trz_trains_i.png"></a><a href="http://trainz.vtsim.com/tracks.htm" border="0"><img src="http://www.vtsim.com/image/b_trz_tracks_i.png"></a><a href="http://trainz.vtsim.com/trackside.htm" border="0"><img src="http://www.vtsim.com/image/b_trz_trkside_i.png"></a><a href="http://trainz.vtsim.com/scenery.htm" border="0"><img src="http://www.vtsim.com/image/b_trz_scenery_i.png"></a><a href="http://trainz.vtsim.com/routes.htm" border="0"><img src="http://www.vtsim.com/image/b_trz_routes_i.png"></a><a href="http://trainz.vtsim.com/others.htm" border="0"><img src="http://www.vtsim.com/image/b_trz_others_i.png"></a><a href="mailto:[email protected]" border="0"><img src="http://www.vtsim.com/image/b_email.png"></a><br /> 
<img src="http://www.vtsim.com/image/sep_800.png"> 
</p> 

//--- and the menu code ended here 

<p align="center"> 
Contents will display here 
</p> 

</font> 
</body> 
</html>

可能复制：http://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll – Jay

答

基本上包裹的容器内，带着几分的jQuery你这样的标题：

$(window).scroll(function() { 
      if ($(window).scrollTop() > 226) { 
       $(".header").addClass("fixed"); 
      } else { 
       $(".header").removeClass("fixed"); 
      } 
     });

你添加一个类到这个容器，并让它滚动226px（内容超过你的页眉高度）。

CSS：

.fixed { 
    position:fixed; 
    width:100%; 
    top:0; 
    left:0;   
}

FIDDLE

编辑：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(window).scroll(function() { 
      if ($(window).scrollTop() > 226) { 
       $(".header").addClass("fixed"); 
      } else { 
       $(".header").removeClass("fixed"); 
      } 
     }); 
    </script> 
    <style type="text/css"> 
     .fixed { 
     position:fixed; 
     width:100%; 
     top:0; 
     left:0;   
    } 
    </style>

：方便地在网上实现这只是在你的HTML添加此这一切之前的</head>踏歌并且不要忘记添加<div class="header">也像小提琴的例子。

这是awseome！当我找出应该在哪里（或哪些文件）实现CSS和jQuery代码时，我的问题将得到完全解答。我原本做了一个简短的演示文稿，但它被编辑和重切割，我解释说我是一个简单的HTML和复制/粘贴一切完全noob。预先感谢您，但我需要进一步的实施帮助。 –

我编辑了我的答案，让你知道在哪里添加代码 –

Perfect.Implemented和工作！非常感谢！ –

答

我这样做的方式，我认为这是一个非常标准的方法，一旦窗口的滚动位置到达标题顶部，就在标题上设置一个css类.fixed。

此方法需要JavaScript（更具体地说，jQuery）！

$(function() { 
 
    createSticky(jQuery("#header")); 
 
}); 
 

 
function createSticky(sticky) { 
 

 
    if (typeof sticky !== "undefined") { 
 

 
    var pos = sticky.offset().top, 
 
     win = jQuery(window); 
 

 
    win.on("scroll", function() { 
 
     win.scrollTop() >= pos ? sticky.addClass("fixed") : sticky.removeClass("fixed"); 
 
    }); 
 
    } 
 
}

#header { 
 
    background: #666; 
 
    padding: 3px; 
 
    padding: 10px 20px; 
 
    color: #fff; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
body { 
 
    height: 5000px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>stuff that might be above the header</p> 
 

 
<div id="header"> 
 
    Home 
 
</div>

只有

当浏览器支持长一点，你可以使用position: sticky这将基本上没有JavaScript的做同样的事情

CSS。如果您的用户人口统计数据是Firefox，那么随着Firefox已经支持一段时间，您可以继续使用它。

http://caniuse.com/#feat=css-sticky

答

可以使用DOM，位置CSS属性和很少的JavaScript代码，我的scrolltop财产实现它。即把onscroll事件body标签（O添加事件侦听器）

<body onscroll="calculate_top()">

和id="myMenu"在你的菜单

//--- now starts the menu wich I pretend to be kept fixed on top when scrolling 
<p align="center" id="myMenu"> 
    . . . 
    <img src="http://www.vtsim.com/image/sep_800.png"> 
</p> 
//--- and the menu code ended here

和Javascript

function calculate_top() { 
    var y = 0;  
    element=document.getElementsByTagName("body"); 

    y=element[0].scrollTop; 
    //you can see y values while you scrolling 
    console.log(" y = " + y); 
    if(y > 140){//old style 
     document.getElementById("myMenu").style.position='fixed'; 
     document.getElementById("myMenu").style.top=0+'px'; 
    }else{ 
     document.getElementById("myMenu").style.position='relative'; 
    } 
}

140值之间的测量顶部你的菜单和屏幕上的身体顶部（你可以改变到你需要的任何东西）

如何在滚动时将页面的一部分固定在顶部

CSS。如果您的用户人口统计数据是Firefox，那么随着Firefox已经支持一段时间，您可以继续使用它。

相关推荐