仅限CSS

Question

当页面有足够的内容需要向下滚动时，标题和菜单将消失。现在，标题不是一个问题，但我真的非常希望将菜单固定在页面顶部，同时仍然向下滚动内容。

我在这里发布带有标题和菜单的页面代码

<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>

Answer 1

基本上将你的标题包装在一个容器中，并带有一些像这样的jquery：

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

您向此容器添加一个类并使其fixed ocne，向下滚动226px（内容超过标题高度）。

的CSS：

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

<强> FIDDLE

编辑：要在您的网络中轻松实现此功能，只需在html中的</head> tage之前添加所有这些：

<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">。

Answer 2

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

此方法需要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

Answer 3

您可以使用DOM的scrolltop属性，位置CSS属性和少量JavaScript代码来实现它，即将onscroll事件放入body标签（添加事件监听器）

<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值是屏幕上方菜单和身体顶部之间的距离（您可以根据需要更改）

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

3 个答案:

仅限CSS