0
votes

Comment garder deux éléments réglés à la position: collante de se couvrir les uns les autres?

Lorsque la position de l'appareil est réglée sur Sticky sur deux divs de blocs de blocs empilés de l'autre, lorsque la page rend l'utilisateur et que l'utilisateur fait défiler l'utilisateur, les deux divs colleront en haut de la vue. Le bas DIV finit par baller le top div. Qu'est-ce que j'essaie de faire, ou de comprendre, comment puis-je faire le Sticky_box_b, le bâton (ou la pile), sous le Sticky_box_a? De cette façon, le bas div (Sticky_Div_B_) ne dépasse pas le top div (Sticky_box_a).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="author" content="AFTERxL1F3">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>StackOverFlow.com Example By: AFT3RL1F3</title>

    <style type="text/css">

        .sticky_box_a
        {
            display: block;
            position: sticky;
            position: -webkit-sticky;
            background-color: blue;
            width: 100%;
            height: 200px;
            margin: 0;
            padding: 0;
            top: 0;
        }

        .sticky_box_b
        {
            display: block;
            position: sticky;
            position: -webkit-sticky;
            background-color: red;
            width: 50%;
            height: 400px;
            margin: 0 auto 0 auto;
            padding: 0;
            top: 0;
        }
    </style>
</head>
<body>

    <div class="sticky_box_a">
        THIS IS A BOX WITH THE CSS PROPERTY "position: sticky;"
    </div>

    <div class="sticky_box_b">
       This is 'ANOTHER' box with the CSS3 'property: sticky;'
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

html responsive-design position sticky

0 commentaires

3 Réponses :

0
votes

Voici un exemple

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}

<div class="sticky">
<p> This is your sticky box </p>
</div>
<div>
<p>This is your other divs and properties </p>
</div>

1 commentaires

Oui, mais cela ne colle pas au bas de l'élément supérieur. Je veux qu'ils collent, mais empilez lorsqu'ils atteignent le haut de la page. En d'autres termes, coller ensemble un sur l'autre.

0
votes

Alors je l'ai compris et c'était vraiment très simple. Si vous voulez 2 divs pour coller ensemble, pour quelque chose comme une liste déroulante pour une NAV collante réactive, vous devez les placer à l'intérieur d'un conteneur ensemble. J'espère que cela aide toute autre personne qui la recherche! AFT3RXL1F3; -)

<html lang="en">

<head>
    <meta name="author"
          content="AFTERxL1F3">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>StackOverFlow.com Example By: AFT3RL1F3</title>

    <style type="text/css">
        .box-a
        {
            position: sticky;
            position: -webkit-sticky;
            top: 0;
        }

        .box-b
        {
            height: 200px;
            background-color: red;
            width: 50%;
            margin-left: 50%;
            margin-right: 50%;
        }

        .box-c
        {
            width: 100%;
            height: 75px;
            background-color: blue;
        }

    </style>
</head>

<body>
    <h1>HELLO WORLD!</h1>
    <br><br>
    <div class="box-a">
        <div class="box-b"></div>
        <div class="box-c"></div>
    </div>


    <br>a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q
    <br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z
    <br><br><br><br>HELLO WORLD!
    <br>a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q
    <br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z
    <br><br><br><br>HELLO WORLD!

</body>

</html>```

0 commentaires

0
votes

C'est ce que je fais pour créer une barre Navère qui a un menu déroulant mobile réactif fonctionnel. On dirait que vous l'avez déjà compris, mais je pensais que je pensais que vous avez des commentaires. À la surface, le paradigme est de mettre tous les objets censés coller dans un seul récipient collant, cependant; La mise en œuvre est beaucoup plus difficile qu'elle ne sonne. Bonne chance! xxx

0 commentaires