附加导航示例

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量52 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yyb-lt/p/5580303.html
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0px;padding: 0px;}
        li{list-style: none;width:200px;height: 30px;}
        a{color: #000;text-decoration: none;display: block;width:200px;height: 30px;text-align: center;line-height: 30px;}
        .active{background-color:blue; color:#fff;animation:move 1s;}
        @-webkit-keyframes move{
            from{background-color: #fff;color:#000;}
            to{background-color: blue;color:#fff;}
         }
        .nav{
            position: fixed;top: 300px; left: 100px;width: 200px;height: 90px;border: 1px solid #eee;border-radius: 5px;}
    </style>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(function(){
            $(window).scroll(function(){//
                var win=$(window).scrollTop();//获取窗口上边距离文档顶部的距离
                var doc=$(document).height();//获取文档高度
                var H=$(window).height();//获取窗口的高度
                var a=$("#a").offset().top;//获取导航对应内容距离文档顶部的距离
                var b=$("#b").offset().top;
                var c=$("#c").offset().top;
                if(win<=(a+500)){
                    $(".one").addClass("active").parent().siblings().children().removeClass("active")
                }else if(win>=(a+800)&&win<=(b+500)){
                    $(".two").addClass("active").parent().siblings().children().removeClass("active")
                }else if(win>=(b+500)||win==(doc-H)){
                    $(".three").addClass("active").parent().siblings().children().removeClass("active");
                }
            })
        })
    </script>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
    <div class="row">
        <ul class="nav">
            <li ><a href="#a" class="one active">第一部分</a></li>
            <li><a href="#b" class="two" >第二部分</a></li>
            <li><a href="#c" class="three" >第三部分</a></li>
        </ul>
        <div class="col-xs-12">
            <h2 id="a">联盟</h2>
            <p>联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟联盟</p>
            <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/>
            <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/>
            <h2 id="b">部落</h2>
            <p>部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落部落</p>
            <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/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <h2 id="c">中立</h2>
            <p>中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立
                中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立
                中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立
                中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立
                中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立中立
            </p>
            <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/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/yyb-lt/p/5580303.html

weixin_30750335
关注
面包屑导航：最佳做法和示例
cune1359的博客
07-06 3537
面包屑导航通常在设计和开发过程中被忽略。 有些人可能认为它没有必要，而另一些人可能觉得它的价值太大了。 事实是，面包屑导航将显着提高网站的可用性。 面包屑为用户提供了另一种导航方法，使他们可以看到他们在网站层次结构中的位置，并减少了导航到网站更高级别所需的步骤。 本文概述了当今使用的不同类型的面包屑导航，它们为什么必不可少以及如何最好地在网上实现。 这里还包括30多个示例，这些示例说明...
golang 示例测试example_testing - 运行并验证示例
weixin_39552538的博客
12-22 1194
testing - 运行并验证示例testing 包除了测试，还提供了运行并验证示例的功能。示例，一方面是文档的效果，是关于某个功能的使用例子；另一方面，可以被当做测试运行。一个示例的例子如下：func ExampleHello() {fmt.Println("Hello")// Output: Hello}如果 Output: Hello 改为：Output: hello，运行测试会失败，提示：...
附加导航
weixin_30367873的博客
11-29 84
一,用bootstrap实现滚动监视 　　data-spy="affix" //监视滚动条的位置,并让你的导航始终在页面的可视区域; 　　data-offset="元素距离页面顶端的位置"; 　　(当导航滚动到页面顶端时可以用css设置.affix中top的值) 二,用js函数实现（如果不确定巨幕高度多少，所以我们可以用这个js函数来测出巨幕的高度） <script t...
Bootstrap附加导航插件
Just The Way You Are
07-18 2229
附加导航即粘贴在屏幕某处实现锚点功能。 附加导航（Affix）插件允许某个div固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该div 会锁定在某个位置，不会随着页面其他部分一起滚动。 当页面内容过多出现滚动条时的浮动导航，如官网页面的左侧导航（下图红框内所示）。其实这组件很简单，就是通过检测滚动位
附加简化版示例数据库到SqlServer数据库实例中
weixin_51583068的博客
05-10 490
SQLServer数据库、附加数据库时出错。有关详细信息，请单击“消息”列中的超链接
Flutter 完整示例
Android_SE的博客
09-12 3313
经过这一段对 Flutter 的了解和接触，掌握如何完整使用 Flutter 开发一个项目。实际上，在 Flutter 中，一切皆 widget，我们的界面都是由各种 widget 堆叠出来的。 一个 Flutter 工程涉及以下几个要点： 工程项目代码分层 主题风格 插件 路由 网络数据交互 界面布局及刷新 一、工程项目代码分层 一个正式的工程项目，它的代码必须做到分层，代码的分层体...
20个Google广告附加信息扩展示例（B2B和B2C）[信息图]
2401_87013060的博客
09-04 656
谷歌广告附加信息是出现在你的广告描述文案前两行以下的额外文案。这些附加信息能够通过提供更多的背景信息或突出特定优惠，让你的文字广告脱颖而出。
Android导航组件Navigation从入门到精通
热门推荐
yingaizhu的博客
05-14 1万+
一、前言     传统的应用开发，一般都是采用一个界面一个 Activity 的形式，但是大家都知道， Activity 在 Android 中是属于重量级的组件，从而导致程序资源消耗大，用户体验不佳。而导航组件 Navigation 采用的是 Fragment 轻量级的组件实现的，可以节省资源，提高用户体验。 二、导航简介   &nbs...
附加的文件超过了服务器,将大文件附加到 Outlook 邮件或事件
weixin_42347778的博客
08-13 2547
将大文件附加到 Outlook 邮件或事件2021/8/12本文内容使用 Microsoft Graph API，可将最大 150 MB 的文件附加到 Outlook 邮件或 事件项目。 根据文件大小，选择以下两种方法之一来附加文件：如果文件大小小于 3 MB，应该针对 Outlook 项的 附件 导航属性执行单个 POST；了解如何针对 邮件或 事件执行此操作。 成功的 POST 响应包括文件附...
安装adventure和northwind示例数据库
cashcat的技术专栏
09-12 5999
网上有许多有关AdventureWorks数据库的安装求助信息，在baidu和google中也可搜到许多该问题的答案，但是有部分答案很是模糊，看完让人似懂非懂，举个例子说明：       1.去官方网站下载Adventureworks数据库、然后安装数据库，再用两种方法附加到MS SQL Server2005中       2.定位到 \Program Files\Microsoft
Bootstrap 附加导航（Affix）插件实例详解
09-02
Bootstrap 附加导航（Affix）插件是一种强大的工具，它允许开发者将页面上的某个 `<div>` 元素固定在特定位置，以便用户在滚动页面时始终保持可见。这种功能在创建侧边栏导航、页眉或页脚等元素时非常有用，可以提供...
BootStrap 附加导航组件
10-21
Bootstrap 附加导航组件是该框架提供的一个强大功能，它允许开发者创建可以固定在屏幕某一位置的导航栏，以便用户在滚动页面时仍然能够方便地访问导航链接。这种导航设计模式通常被称为“粘性”或“固定”导航，提高...
Bootstrap每天必学之附加导航（Affix）插件
09-02
Bootstrap附加导航(Affix)插件是Web开发中一种实用的工具，主要用于创建固定位置的导航元素，使得用户在浏览页面时，某些重要的导航或内容始终保持可见。这种效果类似于页面内的锚点，常用于侧边栏菜单、社交图标等...
Bootstrap 附加导航（Affix）插件
12-13
Bootstrap 附加导航（Affix）插件是一种强大的工具，它允许开发者创建动态的、固定位置的导航元素。这种插件特别适用于那些希望在用户滚动页面时保持可见的元素，例如侧边栏导航、页眉或页脚。在网页设计中，这种...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 856
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 481
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 446
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 874
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1301
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
Bootstrap Affix插件：打造固定位置导航
"Bootstrap 附加导航（Affix）插件是一种功能强大的工具，它使得网页上的某些元素（通常是导航菜单）能够固定在页面的特定位置，无论用户如何滚动页面。这个插件允许开发者创建交互式的导航体验，比如始终保持在视窗...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值