Enregistrement des pièges en position : rencontres collantes, disposition flottante bootstrap-tutoriel HTML-php.cn

Enregistrement des pièges en position : rencontres collantes, disposition flottante bootstrap

青灯夜游

Libérer： 2018-10-10 17:41:13

avant

3391 Les gens l'ont consulté

Quand je suis entré en contact pour la première fois avec l'attribut position:sticky, j'ai réalisé que de nombreuses scènes js précédentes pouvaient être réécrites avec cet attribut CSS. Par exemple, de nombreuses publicités sur le côté droit du site Web doivent être corrigées après un défilement vers le haut. Ce sont des applications complètement collantes.

Ce dont nous allons parler aujourd'hui, c'est la barre de répertoire sur le côté droit de la page de détails de l'article. Lorsque la page glisse vers le bas, elle sera également fixée en haut de la page. utilisé pour écouter l'événement de défilement, puis jugé en fonction de la position, basculer La solution fixe, pour certaines raisons, a décidé de la réécrire en collant.

a été écrit en quelques traits. J'ai supprimé l'écouteur d'événement de défilement, puis j'ai ajouté le style .post-nav à l'élément de menu position:sticky; top:0, mais cela n'a pas fonctionné !

wtf ! Perplexe, j'ai commencé à chercher la raison. J'ai cherché ceci. Il a dit que l'élément parent de l'élément avait peut-être traité l'attribut de débordement, comme l'ajout de overflow:hidden ou quelque chose comme ça, mais après l'avoir regardé, ce n'était pas le cas.

Ensuite, je me suis demandé si cela pouvait être un problème avec la disposition du bootstrap (en fait, c'est lié), alors j'ai écrit la démo :

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="//cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {font-size: 50px; font-weight: 900;}
    .main {height: 2000px; background: #eee}
    .menu {height: 200px; background: yellow}
    .ad {height: 200px; background: red; position: sticky; top: 0px;}
    .guess {height: 200px; background: blue;}
  </style>
</head>
<body>
<p class="container">
  <p class="row">
    <p class="col-md-8 main">content</p>
    <p class="col-md-4">
      <p class="menu">menu</p>
      <p class="ad">ad</p>
      <p class="guess">others</p>
    </p>
  </p>
</p>
</body>
</html>

Copier après la connexion

Mais pas de problème, j'ai soudain pensé que la version bootstrap utilisée par le site Web est 3.x, puis passée à la version 3.3.7. À ce moment-là, le problème est apparu.

Pour le moment, le problème est plus facile à localiser. 4.x utilise une disposition flexible, tandis que 3.x utilise toujours une disposition flottante. Le problème devrait être ici.

Code final (voir ce numéro) :

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {font-size: 50px; font-weight: 900;}
    .main {height: 2000px; background: #eee}
    .side {height: 2000px;}
    .menu {height: 200px; background: yellow}
    .ad {height: 200px; background: red; position: sticky; top: 0px;}
    .guess {height: 200px; background: blue;}
  </style>
</head>
<body>
<p class="container">
  <p class="row">
    <p class="col-md-8 main">content</p>
    <p class="col-md-4 side">
      <p class="menu">menu</p>
      <p class="ad">ad</p>
      <p class="guess">others</p>
    </p>
  </p>
</p>
</body>
</html>

Copier après la connexion

correspond à la question initiale, car le menu appartient à l'élément .col-md-3, donc le .col-md-3 de droite doit être le même que celui de gauche .col-md-9 Gardez-le simplement très cohérent et ajoutez cette ligne de code :

$(&#39;.side&#39;).height($(&#39;.main&#39;).height())

Copier après la connexion

Parce que la zone de contenu de gauche a un chargement paresseux des images, cette ligne de code doit être exécuté en continu :

$(window).scroll(function() { 
 $(&#39;.side&#39;).height($(&#39;.main&#39;).height())

 // other code 
 // ...

})

Copier après la connexion

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo HTML !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!