Make Fixed Header Scroll Horizontal

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

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>

Archna

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.

Lakshminathan Laky

There is a CSS-only solution possible with position:sticky , top: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.. :)

bouraine

        $("#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>

来源：https://stackoverflow.com/questions/9785598/make-fixed-header-scroll-horizontal

标签

css

scroll

css-position