点击右侧导航栏,实现iframe嵌入子页面中div,滑动到最上面

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

// 点击对应的nav里的li标签,页面就滚动到哪里
$('.title-list > li').click(function(event) {$(this).addClass('active').siblings().removeClass('active');
    //li标签里面有a标签,可以阻止到a标签的默认行为
    event.preventDefault(); //这里找到的是target #后面的内容
    var target = $(this).find('a').prop('hash'); //将页面动画滚动到指定位置
    var scroll_top = $("#ueditor_0").contents().find("body").find(target).offset();
    var s = scroll_top.top;
    $('html, body').animate({scrollTop: s}, 500);
}); //页面滚动到哪,对应的nav里的li就高亮

$(window).on('scroll',function(){ //获取页面滚动高度
    var pageScrollTop = $('html,body').scrollTop();
    $('.title-list > li ').each(function(index,ele){if(index == $('.title-list > li ').length - 1)  { return; }var target = $(this).find('a').prop('hash');
     if($(target).offset().top - pageScrollTop < 0) {$(this).parent('li').siblings().removeClass('active');
        $(this).parent('li').addClass('active'); };
    });
});

转载于:https://my.oschina.net/u/2376927/blog/2991351

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281091.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

wepack环境配置1之node的安装

.向往已久的webpack终于配好了.. 1.要安装webpack&#xff0c;首先需要安装nodejs nodejs下载地址:https://nodejs.org/en/ 下载完成后,一步步安装即可,我是安装到D盘 新建一个nodejs的文件夹,装到这个文件夹里面即可. 安装完毕后检查自己是否安装成功.启动cmd,然后输入npm -v,…

【赏析】.NET跨平台框架-Avalonia UI

这是Avalonia UI官方的一个Demo&#xff0c;站长对部分Nuget包进行了升级&#xff0c;网友【小飞机MLA】对Linux版本修复了字体Bug得以正常运行、演示&#xff1a;Windows 11&#xff1a;macOS 13&#xff1a;可安装Rider&#xff08;EAP即要&#xff09;开发&#xff0c;站长一…

Kernel Newbies内核开发新手的资源

Jessica McKellar在Ksplice blog上的博客文章《Linux Device Drivers》如果你在写一个操作系统&#xff0c;OSDev wiki是一个不错的网站Kernel Newbies内核开发新手的资源

office自定义安装选项_如何自定义Office 2013中功能区上的现有选项卡

office自定义安装选项The Ribbon in Microsoft Office 2013 provides quick access to many features and options by default, but it can be further customized to fit the way you use it. You can add a custom tab to the ribbon or you can add commands to the existin…

Centos6.8 安装spark-2.3.1 以及 scala-2.12.2

一、Spark概述 Spark 是一个用来实现快速而通用的集群计算的平台。 在速度方面&#xff0c;Spark 扩展了广泛使用的 MapReduce 计算模型&#xff0c;而且高效地支持更多计算模式&#xff0c;包括交互式查询和流处理。 在处理大规模数据集时&#xff0c;速度是非常重要的。速…

聊一聊 WPF 程序的键盘是如何被窃听的?

一&#xff1a;背景 1.讲故事前几天群里很热闹&#xff0c;看了下在争论两个问题&#xff1a;电脑里要不要装杀毒软件 ?应该装什么杀毒软件 ?不管杀毒软件流氓不流氓&#xff0c;在如今病毒肆虐的当下互联网&#xff0c;装一个还是能帮我们拦截很多意想不到的东西&#xff0c…

httpclient 实现文件上传中转

开发功能&#xff1a; web前端提交上传文件 —> a服务器接收 —> 转发到b服务器进行文件处理 下面是简单实现的代码&#xff0c;具体细节优化根本自己的需求更改。 public String handleResponse(HttpServletRequest request, HttpServletResponse response)throws Unsup…

AngularJS $watch 性能杀手

双向绑定是AngularJS核心概念之一&#xff0c;它给我们带来了思维的转变&#xff0c;不再是以DOM为驱动&#xff0c;而是以Model为核心&#xff0c;View中写上声明式标签&#xff08;指令或{{}}&#xff09;,AngularJS会在后台默默同步View到Model,并将Model的变化更新到View。…

ipad和iphone切图_如何在iPhone和iPad上的Messages App中固定对话

ipad和iphone切图Khamosh PathakKhamosh PathakBetween updates from your bank and group chats, the Messages app on your iPhone or iPad can be a mess. Use the pinned conversations feature introduced in iOS 14 and iPadOS 14 to access your favorite conversations…

这个WPF的企业级MES项目爆火,就是UI争议大!

工业4.0时代&#xff0c;智能智造MES系统大行其道&#xff0c;然而基于.NET跨平台的罕见&#xff01;这里有一套《.NET6WPF企业级MES实战》教程&#xff0c;基于.NET6跨平台开发&#xff0c;实现了MES多核心功能&#xff0c;尤其是开发框架完整&#xff0c;非常适合复用。这里分…

单调栈学习笔记

线性结构——单调栈①定义&#xff1a;栈内的元素&#xff0c;按照某种方式排序&#xff08;单调递增或单调递减&#xff09;如果新入栈的元素破坏了单调性&#xff0c;就弹出栈内元素&#xff0c;直到满足单调性②优点&#xff1a;可以很方便地求出某个数左边或者右边第一个比…

《VMware Virtual SAN权威指南(原书第2版)》一1.5 什么是Virtual SAN

1.5 什么是Virtual SAN Virtual SAN是VMware推出的一种存储解决方案&#xff0c;它的beta版本在2013年发布&#xff0c;2014年3月正式开放给公众&#xff0c;并于2016年3月升级到6.2版。VSAN完全集成在vSphere中&#xff0c;它是一种基于对象的存储系统&#xff0c;是虚拟机存…

js 控制超出字数显示省略号

//多余显示省略号 function wordlimit(cname, wordlength) {var cname document.getElementsByClassName(cname);for (var i 0; i < cname.length; i) {      var nowLength cname[i].innerHTML.length;if (nowLength > wordlength) {cname[i].innerHTML cname…

在Outlook 2007中查看您的Google日历

Google Calendar is a phenomenal web application for managing your calendars, but so many of us are still forced to use Outlook at work. The good thing is you can have the best of both worlds by subscribing to your Google Calendar from Outlook. Google日历是…

元宇宙、数字孪生和企业NFT

昨天参加了华为云上海开发者日活动&#xff0c;并客串主持了一场"元宇宙技术创新和商业实践之路"的闭门研讨会。研讨会上大家讨论热烈&#xff0c;干货多多&#xff0c;大家提到元宇宙的企业级前景、数字藏品和数字人案例的亲身体会。在会上盆盆分享了自己关于企业级…

设置状态栏和标题栏的样式

设置状态栏和标题栏的样式Android setSystemUiVisibility(visible)方法详解这个方法可以详细的设置各种标题栏的状态栏的样式.visible的值来决定1.SYSTEM_ UI_ FLAG_ LOW_ PROFILE: 影藏不重要的状态栏图标&#xff0c;导航栏中相应的图标都变成了一个小点。点击状态栏或者标题…

CMD命令硬盘/光驱挂载

使用Mountvol命令挂载时&#xff0c;发现GUID不对啊&#xff0c;哪应该到哪找呢&#xff1f; 1.首先可以用Mountvol命令&#xff1a; Mountvol 创建、删除或列出卷的装入点。Mountvol 是一种不需要驱动器号而连接卷的方式。 语法&#xff1a; mountvol [Drive:]Path VolumeName…

纽约大街上的免费WiFi,终于铺起来了

纽约市的城市互联网项目终于开始动工了。 这个被称为 LinkNYC 的网络服务项目&#xff0c;是将现有的 1 万多个付费电话亭改造成提供 Wi-Fi 网络的“热点桩”&#xff0c;为纽约市民提供免费网络。从 12 月 28 日开始&#xff0c;工人们已经开始安装首批的 LinkNYC 热点桩了&am…

解决Maven管理项目update Maven时,jre自动变为1.5

本文为博主原创&#xff0c;未经允许不得转载&#xff1a; 在搭建一个maven web项目时&#xff0c;项目已经按步骤搭建完好&#xff0c;之后项目上就报了一个错误。 在控制台看到错误提示如下&#xff1a;Dynamic Web Module 3.0 requires Java 1.6 or newer。。 已经改过项目中…

reddit_如何将多个子Reddit与多个Reddit合并

redditchrisdorney/Shutterstock.comchrisdorney / Shutterstock.comIf you’re subscribed to a lot of communities on Reddits, some of the content you want to see may get lost in the mix. For easier browsing, you can make your own “multireddit” that combines …