Maison > Article > interface Web > Exemple de partage sur la façon d'implémenter le fonctionnement du plafond de la barre de navigation à l'aide de JavaScript

Exemple de partage sur la façon d'implémenter le fonctionnement du plafond de la barre de navigation à l'aide de JavaScript

黄舟original: 2017-07-25 09:20:182880parcourir

Exemple de partage sur la façon dont JavaScript implémente le fonctionnement du plafond de la barre de navigation

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
    body {
        padding:0;
        margin:0;
    }
    #nav {
        width:100%;
        height:60px;
        background:#39f;
        color:#fff;
        line-height:60px;
        text-align:center;
        padding:0;
        margin:0;
        list-style:none;
    }
    #nav li {
        float:left;
        width:20%;
        height:60px;
    }
    .fix {
        position:fixed;
        top:0;
        left:0;
    }
</style>
</head>

<div class="wrap">
    <h1>在线书城</h1>
    <p>有没有一本书让你仿佛遇到春风十里</p>
    <ul id="nav">
        <li>加入购物车</li>
        <li>加入收藏</li>
        <li>立即购买</li>
    </ul>
    <div class="con">
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
        <p>好书有好事有好诗</p>
    </div>
</div>

<script type="text/javascript">
var tit = document.getElementById("nav");
//alert(tit);
//占位符的位置
var rect = tit.getBoundingClientRect();//获得页面中导航条相对于浏览器视窗的位置
var inser = document.createElement("div");
tit.parentNode.replaceChild(inser,tit);
inser.appendChild(tit);
inser.style.height = rect.height + "px";

//获取距离页面顶端的距离
var titleTop = tit.offsetTop;
//滚动事件
document.onscroll = function(){
    //获取当前滚动的距离
    var btop = document.body.scrollTop||document.documentElement.scrollTop;
    //如果滚动距离大于导航条据顶部的距离
    if(btop>titleTop){
        //为导航条设置fix
        tit.className = "clearfix fix";
    }else{
        //移除fixed
        tit.className = "clearfix";
    }
}
</script>
</html>

Lorsque la page défile vers le bas et dépasse la position initiale de la navigation au plafond, la barre de navigation au plafond doit être fixée en haut de la fenêtre , la barre de navigation générale du plafond peut également être remplacée par la barre de titre de l'article, le champ de recherche, la barre d'onglets, etc., tels que Baidu Nuomi, Tmall et Taobao sont les plus couramment utilisés. Ce qu'ils ont en commun, c'est qu'ils sont importants en termes de contenu ou de fonction, mais ne sont pas les éléments les plus importants. Les éléments les plus importants sont généralement placés en haut .

1.L'idée d'implémentation est d'écouter l'événement de défilement et de déterminer la position de défilement de la page actuelle Lorsque la distance de défilement est supérieure à la distance depuis le haut de la barre de navigation. , utilisez le positionnement de la fenêtre pour la barre de navigation.

2. La méthode de mise en œuvre est la même que "Retour en haut", mais vous constaterez que lorsque la fonction de plafond est implémentée, la page tremblera lorsqu'elle atteint la position critique, car lorsque la barre de navigation est corrigé, le contenu inférieur remplit la navigation La position où la barre est partie. Il occupait la position de la barre de navigation, donc il tremblait un peu. Ici, nous définissons un espace réservé pour maintenir la position de la barre de navigation .

L'effet est le suivant :

JS 吸顶导航，告别“回到顶部”

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!

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：Exemple de menu de navigation contrôlé par JavaScriptArticle suivant：Exemple de menu de navigation contrôlé par JavaScript

Articles Liés

Voir plus