Rumah  >  Artikel  >  hujung hadapan web  >  关于JavaScript如何实现导航栏吸顶操作的实例分享

关于JavaScript如何实现导航栏吸顶操作的实例分享

黄舟
黄舟asal
2017-07-25 09:20:182880semak imbas

关于JavaScript如何实现导航栏吸顶操作的实例分享

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

当页面向下滚动时超过了吸顶导航的初始位置时,需要把吸顶导航栏固定在窗口顶部,一般吸顶导航栏还可以替换成文章标题栏,搜索框、tab条等等,例如百度糯米,天猫,淘宝最为常用。它们共同点是在内容或者功能上比较重要,但又不是最重要的元素,最重要的一般会放置于顶部

1.实现思路是监听 scroll 事件,判断当前页面的滚动位置,当滚动距离大于导航条距顶部的距离时,为导航条采用窗口定位。

2.与“回到顶部“的实现方法一样,但是会发现实现吸顶功能时,到了临界位置时,页面会抖动一下,因为当导航条fixed出去,下部内容填补了导航条离开的位置。抢占了导航条的位置,所以抖动了一下。此处我们设置一个占位符,守住导航条的位置

 

效果如下:

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

Atas ialah kandungan terperinci 关于JavaScript如何实现导航栏吸顶操作的实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn