Make Fixed Header Scroll Horizontal

Asked 20/3, 2012 at 11:8 Answered 6/12, 2018 at 10:7

so guys, if u test the code below, u can see that everything is alright, except if u size down the window, so the flash menu ( red div ) is going out of the page to the right. well if the window is smaller then 900px, there is a HORIZONTAL scrollpane, so far so good, but it just scrolls the content of the page! I want the upper part also to scroll, but only horizontal, cuz I want them to be fixed (stay on top of the site always)...

any suggestions? I've tried so many things from google, but no one of them was the right one 4 me...

thx & g.r. ace

html:

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Titel</title>
    <link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="div_page" align="center">
        // page content goes here
    </div>
    <div id="div_menu">
        <img src="img/logo.png" alt="<Logo>" style="position:absolute; top:0px; left:20px; width:225px; height:150px;">
        <div id="div_flash"></div>
    </div>
</body>


</html>

css:

@charset "utf-8";

body {
    padding:0px;
    margin:0px;
}

#div_menu {
    position:fixed;
    top:0px; right:0px; left:0px;
    width:100%; height:40px;
    min-width:800px;
    overflow:visible;
    background-image:url(img/menu.png);
    background-position:top left;
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:100% 40px;
    background-color:#333;
}

#div_flash {
    position:absolute;
    top:0px; left:250px;
    width:500px; height:150px;
    background-color:#F00;  
}

#div_page {
    position:absolute;
    top:40px; right:0px;left:0px;
    min-width:800px; min-height:500px;
}

Sorcery answered 20/3, 2012 at 11:8 Comment(5)

what u want to know ? if u test out the code as i described it, u'll c what i mean... – Sorcery 20/3, 2012 at 13:25

actually i tested the code and i couldnt see the content moving as you said – Myrick 21/3, 2012 at 4:31

did u resize the window smaller then width:800px & height:600px ? first of all u should proppably ad some <p>blabla<br>.....</p> into the div_page, cuz if there is nothing inside the page to scroll, the page proppably won't scroll ^^ – Sorcery 21/3, 2012 at 8:35

Can you tell me the layout you require in detail? – Myrick 21/3, 2012 at 8:43

well simply i want the menu on the top in fixed position, so only the page content is scrolling... the problem is : if a div is set to position:fixed, u CAN NOT scroll to the right, if the right part of the menu is out of the window... – Sorcery 21/3, 2012 at 9:10

As it seems to me, pure CSS can't solve this issue. But adding a few lines of JQuery may help:

<script type="text/javascript">
    $(window).scroll(function() {
        $('#div_menu').css('top', $(this).scrollTop() + "px");
    });
</script>

CSS position of #div_menu should be changed to absolute.

UPD: In pure JS it would be:

<script type="text/javascript">
    var div_menu = document.getElementById('div_menu'); 
    window.onscroll = function (e) {  
        if (div_menu)
            div_menu.style.top = window.pageYOffset + 'px';
    }  
</script>

Peptic answered 20/3, 2012 at 11:21 Comment(9)

I should have said that i only want to use html, css and maybe javascript ( but just to make a connection to flash menu )... isn't there a way to make a div with position:absolute to stay on top of the page ? – Sorcery 20/3, 2012 at 11:26

Actually, JQuery is very powerful wrapper over JavaScript to work with HTML and more than that, give it a try.. – Peptic 20/3, 2012 at 11:50

i know that jquery is powerful, but the cuest is to do it wothout anything like jquery and such... – Sorcery 20/3, 2012 at 11:55

Updated my answer with pure JS. – Peptic 20/3, 2012 at 12:0

i've tryed a similar js code b4. thats exactly what i want the page to look like, BUT i think that seems MUCH to laggy in IE... – Sorcery 20/3, 2012 at 12:28

so i was thinking of making the div_menu -> position:absolute, and top:0px, left0px, right:0px. and then make the div_page -> position:absolute and top:40px, left-right-bottom:0px AND OVERFLOW SCROLL. that seemy also a nice way to make the content scroll and ceep the menu on top of the page, BUT there is a problem: – Sorcery 20/3, 2012 at 12:32

if the menu and the content doesn't fit vertically, the page is going to have the scrollpane on the right of the div_page, BUT the flash menu ( red rectangle ) is overlapping the scrollpane in the top area, if it doesnt fit in horizontal space..., cuz i need the menu in the front ( z axis )... – Sorcery 20/3, 2012 at 12:34

there r strange things going on... :D i'll keep trying to find a "clear" solution. – Sorcery 20/3, 2012 at 12:34

@BaseTaller that's work but not in some scenario such as opening developer tools or other tools panel and when load different media as changing browser size. Do you have any idea with these? anyway you got +1 :) – Erbium 3/6, 2014 at 12:11

There is a CSS-only solution possible with position:sticky , top:0

Airport answered 6/12, 2018 at 10:7 Comment(1)

Most simple and clean solution! – Stunsail 25/6, 2020 at 14:4

See this Fiddle : Link

$headerDiv = $('.header-wrapper');
$rowDiv = $('.row-wrapper');
$rowDiv.scroll(function(e) {
    $headerDiv.css({
        left: -$rowDiv[0].scrollLeft + 'px'
    });
});

It will be helpful.

Heald answered 15/7, 2013 at 9:33 Comment(0)

Hie, that is because you have made the widht of the content boxes/divs fixed; If you want to make them adjust as per the window size, then use percentages for width like: width: 60%; This is infact a responsive design. But still if you want your page header only to be scrolled, then make sure that you bound the content required in a div tag, whose width should be determined by page's width and apply overflow property for that tag; if you want only in horizontal direction, then use overflow-x:scroll and overflow-y hidden(since if one direction is specfied, other will be visible but with disabled mode), which is as shown:

<div style="width:60%;overflow-x:scroll; overflow-y:hidden;">
   //your conetnt//including divs
</div>

The thing here is, whenever the width of the content in a div/any tag is more than the width of its outer div, then overflow happens; in this case, you can use overflow property, where you can set properties like : hidden, show, scroll, auto etc..

But try to avoid this, because responsive design is the next-generation markup language technique, where the widths(size) should be dependent on the browser size... :)

Happy coding.. :)

Olvan answered 15/7, 2013 at 8:41 Comment(0)

        $("#body").scroll(function() {
          scrolled = $("#body").scrollLeft();
          $("#header").scrollLeft(scrolled);
        });

.header {
  background-color: red;
  position: absolute;
  top: 10px;
  left: 8px;
  width: 120px;
  overflow: hidden;
}
.body {
  overflow: scroll;
  margin-top: 51px;
  height: 100px;
  width: 120px;
}
.col {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  flex-direction: row;
}
.cell1 {
  border-top: 1px solid red;
  border-right: 1px solid red;
  background: #DDD;
  height: 40px;
  min-height: 40px;
  width: 50px;
  min-width: 50px;
}
.cellh {
  border-top: 1px solid red;
  border-right: 1px solid red;
  background: yellow;
  height: 40px;
  width: 50px;
  min-width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Here a very simple solution 
     Uses Flex for the table formatting -->
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div id="wrap">
    <div id="main">
      <div id="header" class="row header">
        <div class="cellh">1</div>
        <div class="cellh">2</div>
        <div class="cellh">3</div>
        <div class="cellh ">4</div>
        <div class="cellh">5</div>
      </div>
      <div id="body" class="col body">
        <div class="row">
          <div class="cell1"></div>
          <div class="cell1 "></div>
          <div class="cell1 "></div>
          <div class="cell1 "></div>
          <div class="cell1 "></div>
        </div>
        <div class="row">
          <div class="cell1"></div>
          <div class="cell1 "></div>
          <div class="cell1 "></div>
          <div class="cell1 "></div>
          <div class="cell1 "></div>
        </div>
        <div class="row">
          <div class="cell1"></div>
          <div class="cell1 "></div>
          <div class="cell1 "></div>
          <div class="cell1 "></div>
          <div class="cell1 "></div>
        </div>
        <div class="row">
          <div class="cell1"></div>
          <div class="cell1 "></div>
          <div class="cell1 "></div>
          <div class="cell1 "></div>
          <div class="cell1 "></div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Fairleigh answered 11/11, 2015 at 16:6 Comment(1)

Add some textual explanation what you did ;) – Eley 12/11, 2015 at 7:21

Recommended topics

Hot tags