同一页面中随滚动条变化的菜单

最新推荐文章于 2023-04-22 17:18:58 发布
最新推荐文章于 2023-04-22 17:18:58 发布
阅读量1k 收藏
点赞数
分类专栏： 前端 文章标签： 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cindypin/article/details/78656996
版权

在同一页面中，当滚动条到达中部菜单时，菜单可固定在浏览器头部导航，代码如下：

<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>随滚动条变化的菜单</title>
</head>

<style>
    html,
    body {
        width: 100%;
        margin: 0px;
        height: 100%;
    }

    .header {
        height: 80px;
        text-align: center;
        line-height: 80px;
        background: #000;
        color: #fff;
    }

    .banner {
        height: 200px;
        color: #fff;
        line-height: 200px;
        text-align: center;
        background: #5eacef;
    }
    .tab-title ul {
        vertical-align: middle;
        font-size: 0;
        -webkit-transition: width ease .8s;
        transition: width ease .8s;
    }

    .tab-title ul li {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        box-sizing: border-box;
        max-width: 140px;
        min-width: 12.5%;
    }

    .tab-title ul li.current a {
        display: block;
        border-bottom: 3px solid #2277da;
        color: #2277da;
        background: #fff;
    }

    .tab-title ul li a {
        font-size: 14px;
        color: #333;
        padding: 0 10px;
        height: 59px;
        line-height: 59px;
        display: inline-block;
    }

    .tab-content {
        margin: 40px 0 60px;
        position: relative;
    }

    .fixed-title {
        position: fixed;
        z-index: 100;
        box-shadow: rgba(0, 0, 0, .22) 0 5px 10px -5px;
        border-bottom: 0;
        width: 100%;
    }
</style>
<body>
    <div class="header">header</div>
    <div class="banner" id="banner">banner</div>
     <div class="tab-title" id="tab_title">
        <ul>
            <li class="current"><a href="#userGuide">新手指引</a></li>
            <li class=""><a href="#userImg">客户案例</a></li>
            <li class=""><a href="#userDefined9">产品优势</a></li>
            <li class=""><a href="#featuresV2">产品功能</a></li>
        </ul>
    </div>

        <h3 id="userGuide" class="tab-content-title">新手指引</h3>
        <div class="tab-content-detail qc-wrapper">
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
        </div>
        <h3  id="userImg" class="tab-content-title">客户案例</h3>
        <div class="tab-content-detail qc-wrapper">
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
        </div>
        <h3 id="userDefined9" class="tab-content-title">产品优势</h3>
        <div class="tab-content-detail qc-wrapper">
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
        </div>
        <h3 id="featuresV2" class="tab-content-title">产品功能</h3>
        <div class="tab-content-detail qc-wrapper">
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
            <p>11111</p>
        </div>
</body>
<script src="jquery-1.8.3.min.js"></script>

<script>
    window.onscroll = function(e) {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        var banner = document.getElementById('banner');

        changeTitle(t);
    }

    function changeTitle(t) {
        var iframeTitle = document.getElementById("tab_title");
        if (t >= 280) {
            !hasClass(iframeTitle, 'fixed-title') && addClass(iframeTitle, 'fixed-title');
            iframeTitle.style.top = '0';
        } else {
            hasClass(iframeTitle, 'fixed-title') && removeClass(iframeTitle, 'fixed-title');
        }
    }

    $('#tab_title').find('li a').on('click', function(e) {
        $('h3').animate({
            'margin-top': '10px'
        });
        $('#' + $(this).attr('href').split('#')[1]).animate({
            'margin-top': '100px'
        }, 300);

    })

    function hasClass(ele, cls) {
        return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }

    function addClass(ele, cls) {
        if (!this.hasClass(ele, cls)) ele.className += " " + cls;
    }

    function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            ele.className = ele.className.replace(reg, ' ');
        }
    }
</script>

</html>
Cindypin
关注
专栏目录
随页面滚动改变定位的tab菜单
bury_的博客
02-27 5657
实现效果及完整代码：https://lucyzlu.github.io/Web/toTop.html 1.导航菜单功能 在页面滚动时导航菜单始终显示在视口内，以便用户在浏览时可以随时点击导航菜单链接到别的页面查看样例。 我觉得这里之所以要特别把导航菜单做成这样，是因为这个页面是基本样例的展示，文档本身高度比较大，且用户一般不会从头到尾仔细看文档，很可能中途就要跳转到其他页面，因此让用户随...
页面滚动式固定左侧菜单栏
cczsmile的博客
04-16 1393
思路 页面滚动时添加.activeFixed固定元素，需要获取scrollY，为了保持左侧菜单不移位，需要获取菜单到左侧的距离offsetLeft。 HTML <!--左侧导航--> <ul class="menu"> <li><a href="#"><b>This year's tuition</b></a&gt...
滚动菜单跟随
weixin_34116110的博客
11-30 198
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动菜单跟随</title> </head> <style> *{margin:0;padding: 0;} a{co...
【vue---better-scroll】类似外卖点餐界面的左右侧菜单联动：点击左侧使右侧滚动到对应位置，右侧滚动时选中左侧对应选项
悄羊的博客
09-17 2697
一、效果： 二、安装依赖： npm install better-scroll npm install stylus stylus-loader@3.0.1 --save-dev 三、vue文件代码： <template> <div> <div class="goods"> <div class="menu-wrapper"> <ul> <li clas
页面局部刷新（左侧菜单变化，右边div内容变化）
wsl的专栏
05-06 2万+
页面局部刷新 jquery  load 一：全局页面：menu.html(jsp) 1.     引入js scripttype="text/javascript"src="js/jquery.js">script> script type="text/javascript" src="js/jquery.history.js">script> history历史记录插件可以帮
原生js监听滚动条_原生JS实现滚动条监听
weixin_39875941的博客
12-20 2202
本文主要利用原生的javascript实现滚动条事件的监听，主要涉及的知识：(1)利用React组件渲染一个UI页面(2)实现锚点链接(3)实现滚动条onscroll事件其中,利用React渲染的UI延续了React状态提升中的内容，只是在这个基础上做了一点相应的修改最终得到的DOM页面的结构如下：(2)锚点链接：锚点是页面中的一种超链接，主要体现为：通过点击命名锚点，最终指向页面中的某一部分，也...
C语言窗口水平滚动条,C语言Windows程序设计滚动条
weixin_34377666的博客
05-18 1661
滚动条由滚动滑块以及两端的滚动箭头组成, 滚动条的作用是当需要显示的内容超过窗口客户区大小时提供上下/左右的翻页使用户能够完整的阅读显示信息Windows滚动条介绍滚动条由滚动滑块以及两端的滚动箭头组成,滚动条的作用是当需要显示的内容超过窗口客户区大小时提供上下/左右的翻页使用户能够完整的阅读显示信息,滚动条的图示:滚动条理论基础1>.上下滚动?以垂直方向的滚动条为例,当用户向下滚动...
自适应表格，适用于PC，手机同一页面
08-31
标题"自适应表格，适用于PC，手机同一页面"揭示了这个设计策略的核心目标：创建一个可以在桌面电脑和移动设备上无缝切换的表格，而不仅仅是简单地缩小尺寸。这意味着表格不仅需要在大屏幕上保持原有的结构，还需要在...
wxPython滚动条事件详解
9. EVT_SCROLL_THUMBTRACK: 在用户拖动滚动条滑块的过程中，此事件不断触发，无论滑块移动了多少距离，只要还在同一页面范围内。这提供了连续反馈，让用户知道滚动条的位置变化。 在wxPython中，通过绑定这些事件到...
jQuery制作单页面滑动效果仿猎豹浏览器
05-06
4. **滚动事件处理**：在`$(window).scroll()`事件中，获取当前滚动条的位置，比较与各页面顶部的距离，当某个页面处于视口范围内时，触发相应的动画效果。 5. **平滑滚动**：使用`$('html, body').animate()`方法...
点击菜单内容显示对应区域，滚动菜单也变化
最新发布
fengxiaopeng74的博客
04-22 391
以前写过一个案例，终于用到了项目中，这个是升级版考虑了点击的时候内容要显示对应的区域，内容区域滚动的时候菜单也会随着变化 <template> <div class="box"> <div class="menu"> <ul> <li v-for="(item, index) in list" :key="index" :class="{ ac
系统左侧菜单上下滚动功能
Shawn_YuL的博客
02-17 3814
鉴于系统左侧导航菜单的栏目过多，出现有些模块看不到的情况，考虑做一个菜单上下滚动。目前系统左侧导航菜单是easyui的手风琴效果，UI更新后是图片和文字配合形式。以下是对于过程的整理： 一、方案的查找与确定 1、方案1（引入js插件） 参考示例：http://www.js-css.cn/jscode/focus/focus62/# 尝试结果：导入插件，导航模块那里不能展示，一些js方法
菜单固定 页面滚动 效果
yuan_jie
11-27 1956
在一个单页面设置一个主菜单，当页面滚动时主菜单位置固定在页面窗口中不动，或左或右，或上或下。当单击菜单项时，页面滚动到菜单对应的内容区，当页面滚动到预定内容位置时，对应的菜单项变为当前选中样式。 此效果可以应用在一些内容比较长的单页设计，本文将介绍使用JjQuery和css来实现这一效果，demo中分别有菜单居左、居右及底部效果，点击demo看效果： 查看演示DEMO下载源码
小程序滚动组件，左边导航栏与右边内容联动效果实现
热门推荐
donggua_123的博客
06-25 3万+
最近公司要开发小程序，趁着ui还没出来，先把一些功能实现一下。其中有一个功能，需要左边的导航栏和右边的内容对应联动，其实就想饿了么外卖的选单界面，但是在小程序里实现又有点不同了。最终效果如图（丑是丑了点，关注功能就好）右边内容容器是可以滚动的，可以使用小程序提供的scroll-view组件，要强调的是，必须给节点设置高度滚动的问题好解决，那么联动呢？我们需要的联动必须是左右相互的，即点击导航栏，内...
实现主内容滚动到指定位置，侧边栏也跟随变化
m0_69056719的博客
02-22 1447
侧边栏跟随主内容滚动，滚动定位
JQuery实现导航菜单栏随滚动条上下滚动
PANNJ
05-24 4568
JQuery实现导航菜单栏随滚动条上下滚动
往下拖动页面滚动条时，固定住菜单栏(不随其他内容网上滚动，兼容各版本IE、Chrome、Firefox)
Senton
03-12 5817
// 定义菜单栏离页面顶部的距离，默认为200 var divOffsetTop = 200; //滚动事件 window.onscroll=function(){ var div = document.getElementById("divId"); // 计算页面滚动了多少（需要区分不同浏览器） var topVal = 0; if(window.pag
html 自定义菜单随着滚动条滑动
想吃大盘鸡
08-23 2450
1.给一个div &lt;style&gt; #menu{ position: relative;top: 0px; } &lt;/style&gt; &lt;div id="menu"&gt; &lt;/div&gt; 2.事件菜单，点击 &lt;script&gt; function showHide(num){ if(num==1){ $(...
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
CAT
04-04 1万+
最近一直在弄页面的事情，对页面方面的知识又巩固了一下。这次的内容如题，大家对代码有疑问或者是有更好的方法欢迎留言！js部分        //标题对象      var title = document.getElementById("title");        //菜单对象      var menu = document.getElementById("menu");        //正...
跨浏览器实现层随滚动条滚动的JavaScript代码
这个脚本的目的是确保层在用户滚动页面时能保持在屏幕的可见区域内，提供一种固定头部或侧边栏的实现方式，这样的功能常见于网站的导航菜单或广告条。通过浏览器兼容性的处理，使得这个效果可以在多种浏览器环境下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值