Faire En-Tête Fixe De Défilement Horizontale

alors les gars, si u test le code ci-dessous, u peut voir que tout est bien, sauf si u taille en bas de la fenêtre, de sorte que le menu flash ( rouge div ) est en train de sortir de la page à droite.
eh bien, si la fenêtre est plus petite que la 900px, il y a une HORIZONTALE composant scrollpane, c'est très bien, mais il permet de faire défiler le contenu de la page!
Je veux que la partie supérieure a également pour faire défiler, mais seulement horizontale, parce que je veux qu'ils soient fixes (rester sur le haut du site, toujours)...

des suggestions? J'ai essayé beaucoup de choses à partir de google, mais pas un d'entre eux était la bonne 4 moi...

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;
}
  • pourriez-vous être plus précis?
  • ce que tu veux savoir ? si u test le code comme je l'ai décrit, u vais c ce que je veux dire...
  • en fait j'ai testé le code et je ne pourrais pas voir le contenu de déménagement que vous avez dit
  • u ne redimensionner la fenêtre plus petite que la largeur:800px & height:600px ? tout d'abord u devrait proppably ad quelques <p>blabla<br>.....</p> dans le div_page, parce que si il n'y a rien à l'intérieur de la page pour faire défiler la page proppably ne faites défiler ^^
  • Pouvez-vous me dire la mise en page dont vous avez besoin dans le détail?
  • eh bien tout simplement, je veux que le menu sur le haut, en position fixe, de sorte que seul le contenu de la page est de défilement... le problème est que : si un div en position:fixed, u ne PEUT PAS faire défiler vers la droite, si la partie droite du menu de la fenêtre...

InformationsquelleAutor Ace | 2012-03-20
  1. 6

    Comme il me semble, pur CSS ne peut pas résoudre ce problème.
    Mais l'ajout de quelques lignes de JQuery peut aider:

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

    CSS position de #div_menu doit être modifiée pour être absolue.

    UPD:
    En pur JS il serait:

    <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>
    • J'aurais dit que je veux seulement utiliser le html, le css et le javascript peut-être ( mais juste pour faire un lien de menu flash )... n'est-ce pas là une façon de faire un div avec position:absolute pour rester en haut de la page ?
    • En fait, JQuery est très puissant wrapper plus de JavaScript pour fonctionner avec HTML et, de plus, lui donner un essai..
    • je sais que jquery est puissant, mais la cuest est de le faire wothout quelque chose comme jquery et comme...
    • Mise à jour de ma réponse avec pure JS.
    • j'ai essayé une semblable code js b4. c'est exactement ce que je veux que la page ressembler, MAIS je pense que c'est BEAUCOUP de lag dans IE...
    • donc je pensais faire la div_menu -> position:absolute, et le top:0px, left0px, à droite:0px. et puis faire le div_page -> position:absolute et top:40px, gauche-droite-bottom:0px DÉPASSEMENT ET de les faire DÉFILER. que seemy aussi une belle façon de rendre le contenu de défilement et le ceep, le menu en haut de la page, MAIS il y a un problème:
    • si le menu et le contenu ne correspond pas à la verticale, la page va avoir le composant scrollpane sur le droit de la div_page, MAIS le menu flash ( rectangle rouge ) se chevauchent, le composant scrollpane dans la zone supérieure, si elle ne correspond pas à l'espace horizontal..., parce que j'ai besoin de le menu à l'avant ( axe z )...
    • il r des choses étranges se passe... 😀 je vais continuer à essayer de trouver un "clair" de la solution.
    • que de travail mais pas dans un scénario comme l'ouverture d'outils de développement ou d'autres outils du panneau et lorsque la charge différents médias comme la modification de la taille du navigateur. Avez-vous une idée avec ces? de toute façon vous avez +1 🙂

    InformationsquelleAutor BasTaller
  2. 3

    Voir ce Violon : Lien

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

    Il sera utile.

    InformationsquelleAutor Archna
  3. 1

    Il y a un CSS seule solution possible avec position:sticky , top:0

    InformationsquelleAutor Lakshminathan Laky
  4. 0

    Hie, c'est parce que vous avez fait la largeur du contenu des boîtes/vrd fixe; Si vous le souhaitez ajuster selon la taille de la fenêtre, puis utiliser des pourcentages pour la largeur comme: largeur: 60%; C'est en effet une conception souple. Mais si vous voulez que votre page d'en-tête uniquement pour faire défiler, puis assurez-vous que vous avez lié le contenu dans une balise div, dont la largeur doit être déterminée par la largeur de la page et appliquer la propriété de dépassement de cette balise; si vous voulez seulement dans le sens horizontal, puis utilisez overflow-x:scroll et overflow-y caché(car si une direction est specfied, d'autres seront visibles, mais avec le mode désactivé), ce qui est indiqué:

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

    La chose ici est, à chaque fois que la largeur du contenu dans un div/n'importe quelle balise est plus que la largeur de la div extérieure, puis un dépassement de capacité se produit; dans ce cas, vous pouvez utiliser la propriété overflow, où vous pouvez définir les propriétés comme : hidden, montrer, faire défiler, auto, etc..

    Mais essayez d'éviter cela, parce que le responsive design est la prochaine génération de langage de balisage technique, où la largeur(taille) devrait dépendre de la taille du navigateur... 🙂

    Heureux de codage.. 🙂

    InformationsquelleAutor Vidhya Sagar Reddy
  5. -1

    JS:

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

    CSS:

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

    HTML:

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

    • Ajouter un texte d'explication de ce que vous avez fait 😉
    InformationsquelleAutor bouraine