Сделать фиксированный заголовок прокрутки по горизонтали - PullRequest
Новая
       45

Сделать фиксированный заголовок прокрутки по горизонтали

14 голосов
/ 20 марта 2012

так что, ребята, если вы протестируете приведенный ниже код, вы увидите, что все в порядке, за исключением случаев, когда вы уменьшаете размер окна, поэтому меню флэш-памяти (красный div) выходит за пределы страницы справа.хорошо, если окно меньше 900px, есть горизонтальная полоса прокрутки, пока все хорошо, но она просто прокручивает содержимое страницы!Я хочу, чтобы верхняя часть также прокручивалась, но только по горизонтали, потому что я хочу, чтобы они были зафиксированы (всегда оставайтесь на вершине сайта) ...

есть предложения?Я пробовал так много вещей из Google, но ни один из них не был правильным 4 мне ...

thx & gr 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;
}

Ответы [ 5 ]

6 голосов
/ 20 марта 2012

Как мне кажется, чистый CSS не может решить эту проблему. Но добавление нескольких строк JQuery может помочь: 

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

CSS-позиция #div_menu должна быть изменена на абсолютную.

UPD: В чистом JS это будет: 

<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>
3 голосов
/ 15 июля 2013

Смотрите эту скрипку: Ссылка 

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

Это будет полезно.

1 голос
/ 06 декабря 2018

Существует решение только для CSS с position:sticky , top:0

0 голосов
/ 11 ноября 2015 

        $("#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>
0 голосов
/ 15 июля 2013

Хе, это потому, что вы установили видимость полей содержимого / делений;Если вы хотите, чтобы они корректировались в соответствии с размером окна, используйте проценты для ширины, например: ширина: 60%;Это на самом деле адаптивный дизайн.Но все же, если вы хотите, чтобы заголовок вашей страницы только прокручивался, убедитесь, что вы связали содержимое, требуемое в теге div, ширина которого должна определяться шириной страницы, и примените свойство переполнения для этого тега;если вы хотите только в горизонтальном направлении, то используйте overflow-x: scroll и overflow-y hidden (поскольку, если указано одно направление, будет видно другое направление, но с отключенным режимом), как показано: 

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

Дело в том, что всякий раз, когда ширина содержимого в теге div / any превышает ширину его внешнего div, происходит переполнение;в этом случае вы можете использовать свойство переполнения, где вы можете установить такие свойства, как: скрытый, показ, прокрутка, авто и т. д.

Но постарайтесь избежать этого, потому что адаптивный дизайн - это техника языка разметки следующего поколениягде ширина (размер) должна зависеть от размера браузера ...:)

Счастливое кодирование ..:)

...