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

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

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

спасибо & 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;
}

ОТВЕТЫ

Ответ 1

Как мне кажется, чистый 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>

Ответ 2

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

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

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

Ответ 3

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

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

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

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

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

Ответ 4

Надеюсь, это будет полезно для будущего читателя:

$(window).scroll(function() {
  $('#menu').css('left', '-'+ $(this).scrollLeft() + "px");
});
body {
  padding-top: 50px;
}

#menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 15px 0;
  min-width: 600px;
  background-color: #86af49;
}

#menu ul {
  list-style: none;
  margin: 0 auto;
}

#menu ul li {
  float: left;
  margin-right: 15px;
  color: #fff;
}

#menu ul li:last-child {
  margin: 0;
}

.content {
  min-width: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <ul>
    <li>Menu</li>
    <li>Menu</li>
    <li>Menu</li>
    <li>Menu</li>
    <li>Menu</li>
    <li>Menu</li>
  </ul>
</div>
<div class="content">
What is Lorem Ipsum?<br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

Ответ 5

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

Ответ 6

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