QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

资深鱼友Ⅰ

Rank: 8Rank: 8Rank: 8Rank: 8

积分
1409
查看: 171|回复: 2

滚动监听求助

[复制链接]
最佳答案
124 
累计签到:27 天
连续签到:1 天
gopythoner 发表于 2017-9-30 11:04:56 1712 | 显示全部楼层 |阅读模式
5鱼币
我因为django才接触的前端,使用的bootstrap
现在需要求助一个jquery的滚动监听
看网页http://www.stopfollow.com/article/1/

我使用markdown的toc自动生成了右边的目录,现在右边可以通过锚点来跳转左边

但是我在使用bootstrap的滚动监听的时候发现个问题,就是我的右边的标签跟bootstrap有些不同,主要是我的2级锚点是属于嵌套的,这个就导致了当左边到了2级锚点的时候,也在1级锚点中,所以会形成2个锚点同时active,这不是我像看到的,我只需要每次只有1个标签active

麻烦懂jquery的帮我看看我这个网页什么写jquery可以实现左边到达右边的锚点可以让右边对应的标题显示背景色?只能是当前标签

楼层
跳转到指定楼层
最佳答案
97 
累计签到:500 天
连续签到:28 天
不二如是 发表于 2017-10-1 13:52:03 | 显示全部楼层

是不是这个意思:
Snip20171001_502.png


随着页面滚动,右边栏会切换到对应的一级或者二级标题

这是我原来写的一个类似的页面监听原生的(所谓jq只是简化一下dom操作)
  1. window.onscroll = function(){
  2.      var t = document.documentElement.scrollTop || document.body.scrollTop;  //获取距离页面顶部的距离
  3.      var uptop = document.getElementById( "uptop" ); //获取div元素
  4.      if( t >= 300 ) { //当距离顶部超过300px时
  5.         uptop.style.bottom=30+'px';//使div距离底部30px,也就是向上出现
  6.      } else { //如果距离顶部小于300px
  7.         uptop.style.bottom=-50+'px';//使div向下隐藏
  8.      }
  9. }
复制代码
最佳答案
124 
累计签到:27 天
连续签到:1 天
gopythoner  楼主| 发表于 2017-10-10 17:37:13 | 显示全部楼层

我大约能看到你这个js,你这个是在实现“回到顶部”的效果吧?这个效果其实我的博客已经实现了,虽然也是他山之石,但是我能看懂

要实现的效果其实这个样子的http://www.runoob.com/try/try2.p ... spy2&basepath=0
这种效果其实对于很多例子来说我是看过的,也知道大致原理,但是由于我对JS的确是不熟,所以无法达到这种效果
真正的问题在于,我这个右边的目录是markdown自己生成的,所以标签肯定是不能动的,这就有问题了,就是我这个里面是有嵌套效果的ul标签,也就是二级标题跟一级标题的标签不是同级的(我见过的所有例子都是一级和二级标签同级)
二级标签嵌套在一级标签中有个问题,就是当页面到达二级目的的时候,二级目录会进入active状态,但是,因为二级目录是嵌套在一级目录的,所以一级目录依然也是active状态,这样就造成了一级和二级目录同时出现背景色

还是要找几乎补一下js知识,其实我是知道怎么可以打到我的效果的,知识不会用js实现而已

然后,你可以看看百度百科的那个效果,我觉得超赞

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /2 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2017-12-16 19:08

快速回复 返回顶部 返回列表