How to keep a part of a page fixed on top when scroling

Question

When the page has enough contents that it'll need to be scrolled down, the header and the menu will disappear. Now, the header is not a problem, but I'd really really like the menu to be kept fixed on the top of the page while still scrolling contents down.

Here I'm posting the code of a page with that header and menu

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

Possible duplicate : http://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll — Jay, Oct 05 '15 at 14:40

Alvaro Menéndez · Accepted Answer · 2020-07-17T08:59:48.433

Basically wrap your header inside a container and with a bit of jQuery like this:

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

You add a class to this container and make it fixed once you scroll 226px down (content over your header height).

css:

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

FIDDLE

Edit: TO easily implement this script in your web just add this code before the </head> tag in your html:

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

And don't forget to add the <div class="header"> also as in the fiddle example.

This is awseome!! My question will be fully answered when I figure out where (or on wich files) should I implement the CSS and the jquery code. I've made originally a brief presentation but it was edited and heavilly cutted where I explained that I was a complete noob for everything else than simple html and copy/paste. Thank you in advance, but I need further help on implementation. — Vasco Troni, Oct 05 '15 at 15:01

Chris Spittles · Answer 2 · 2015-10-05T15:28:34.553

The way I have done this and I think it's a pretty standard way, is to set a css class of .fixed on the header once the scroll position of the window reaches the top of the header.

This method requires javascript (and more specifically 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 Only

When browser support grows a bit you could use position: sticky which will basically do the same thing with no javascript. If your user demographic is Firefox however, you are good to go as Firefox has supported it for a while.

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

Rodney Salcedo · Answer 3 · 2015-10-06T00:40:42.353

You can achieve it using the scrolltop property of DOM, position CSS property and little JavaScript code, i.e, put the onscroll event to body tag (o add event listener)

<body onscroll="calculate_top()">

and id="myMenu" in your menu

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

and 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';
    }
}

The 140 value is the measure between top your menu and top of body on screen (you can change to what ever you need)

How to keep a part of a page fixed on top when scroling

3 Answers3

CSS Only