如何在滚动时将页面的一部分固定在顶部
如何在滚动时将页面的一部分固定在顶部
提问于 2015-10-05 14:34:04
当页面有足够的内容需要向下滚动时，标题和菜单就会消失。现在，标题不是问题，但我真的很希望在页面顶部保持菜单不变，同时仍然滚动内容。
这里我发布了带有标题和菜单的页面代码
<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:vasco@vtsim.com" 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>回答 3
Stack Overflow用户
回答已采纳
发布于 2015-10-05 14:48:40
基本上，您的头包在一个容器中，并使用一些jQuery，如下所示：
$(window).scroll(function () {
if ($(window).scrollTop() > 226) {
$(".header").addClass("fixed");
} else {
$(".header").removeClass("fixed");
}
});当您向下滚动226 to时，将类添加到此容器中，并使其为fixed (内容超过标题高度)。
css：
.fixed {
position:fixed;
width:100%;
top:0;
left:0;
}小提琴
编辑:要在web上轻松地实现这个脚本，只需在html中的</head>标记之前添加以下代码：
<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>别忘了添加<div class="header">，就像在小提琴示例中一样。
Stack Overflow用户
发布于 2015-10-05 15:22:25
我这样做的方式，我认为这是一个相当标准的方法，是设置一个.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>
仅CSS
当浏览器支持增加一点时，您可以使用position: sticky，它基本上可以在没有javascript的情况下做同样的事情。但是，如果您的用户是Firefox，那么您就可以像Firefox支持它一段时间了。
http://caniuse.com/#feat=css-sticky
Stack Overflow用户
发布于 2015-10-05 17:50:36
您可以使用DOM的scrolltop属性、位置CSS属性和小JavaScript代码来实现它，即将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值是在菜单顶部和屏幕上的身体顶部之间的度量(您可以更改到您需要的任何东西)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32951190
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号