recherche

Maison  >  Article  >  interface Web  >  jQuery implémente la tête Baidu Tieba, navigation fixe effect_jquery

jQuery implémente la tête Baidu Tieba, navigation fixe effect_jquery

WBOY
WBOYoriginal
2016-05-16 15:46:181270parcourir

L'exemple de cet article décrit comment jQuery peut imiter l'effet de navigation fixe de la tête Baidu Tieba. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Jquery est utilisé ici pour obtenir l'effet de fixer la tête sur la page Web, mais pas de faire défiler avec la barre de défilement. Les effets spéciaux de la page Web ont été compilés dans Baidu Tieba. Au début, la barre fixe peut être glissée vers. le haut de la page Web avec la barre de défilement, mais après avoir atteint le haut de la page Web, faites glisser à nouveau la barre de défilement. La tête ne défilera pas, mais d'autres contenus peuvent défiler. Cela semble être un effet qui a été observé. beaucoup sur Internet.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航固定</title>
<script src="jquery-1.6.2.min.js"language="javascript" type="text/javascript"></script>
<script>
$(function(){  
 $(window).scroll(function() {
  //$("body").css({"background-position":"center "+$(window).scrollTop()+""});
  if($(window).scrollTop()>=250){
    $(".nav").addClass("fixedNav");
  }else{
    $(".nav").removeClass("fixedNav");
  } 
 });
});
</script>
<style>
*{
  margin:0px;
  padding:0px;
}
div.nav{
  background:#000000;
  height:57px;
  line-height:57px;
  color:#ffffff;
  text-align:center;
  font-family:"微软雅黑", "黑体";
  font-size:30px;
}
div.fixedNav{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  z-index:100000;
  _position:absolute;
  _top:expression(eval(document.documentElement.scrollTop));
}
</style>
</head>
<body> 
<div class="header" style="background:#CCCC00;height:250px;"></div>
<div class="nav">
<p>导航固定</p>
</div>
<div class="content" style="background:#0099FF; height:2000px;"></div>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Implémentation jQuery de la fonction de sélection d'image par liste déroulante example_jqueryArticle suivant：Implémentation jQuery de la fonction de sélection d'image par liste déroulante example_jquery

Articles Liés

Voir plus