js 网页的侧边栏,滚动到页面的某个高度之后才出现,刚开始不出现,返回也自动隐藏

js 网页的侧边栏,滚动到页面的某个高度之后才出现,刚开始不出现,返回也自动隐藏,第1张

JQurey的话var offset = $(selector).scrollTop(),offset就是高度。

根据这个判断一下就行了。

offset<100时,$(selector).hide(),

>100时,$(selector).show()

逻辑很简单的。

原生也差不多的。

本文接着来告诉你如何让你的整个侧边栏或者侧边栏的指定某个模块在页面滚动的时候随着窗口一起滚动。听起来是不是很炫呢。滚动效果,相信大家已经见过太多,无外乎就是加载一个js特效。开始之前为大家介绍一下侧边栏的构成部分,因为本文采用js特效可以具体到侧边栏某模板(比方说A)到达顶部时,指定模块(比方说B)开始随页面滑动。侧边栏是怎么样的构造侧边栏可以通过小工具或者自行编辑sidebar.php代码来完成,模块布局灵活,一般包括近期文章,近期评论,标签云等等等。下面就是一个常见的侧边栏结构,模块id是我自行编写的,方便大家辨识。...//近期文章 ...//热门文章 ...//标签云 ...//近期评论 ...//连接表 上面就是一个简单的侧边栏构造,注各个模块的id,在下一步滚动代码中将得到对应。如何让侧边栏滚动起来下面就以热门文章、标签云两个相邻模块作为指定滚动模块,来说明指定模块如何实现随窗口滑动。varrollStart = $('.recentcomments'), //近期评论模块到达浏览器顶部时,指定模块开始滚动rollOut = $('.recentcomments,.blogroll')//近期评论以下模块隐藏包括最新评论,指定模块显现rollStart.before('')//这个可以不用修改,与下面保持一致varoffset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev(), rollSet = $('.hotposts,.tagcloud')//指定滚动的模块idobjWindow.scroll(function() { if (objWindow.scrollTop() >offset.top){ if(rollBox.html(null)){ rollSet.clone().prependTo('.rollbox')//注意与上面的保持一直,不用做修改。 } rollOut.fadeOut()rollBox.show().stop().animate({marginTop: objWindow.scrollTop() - offset.top + 20},400)} else { rollOut.fadeIn()rollBox.hide().stop().animate({marginTop:0},400)} })你可以将其粘贴到主题js文件中,也可以用...将其括起来放置到header头文件中。代码说明:随着网页滚动条的滑动,当近期评论模块到达浏览器顶部,近期评论以下的模块包括近期评论隐藏消失,指定模块热门文章和标签云随即显示,开始随窗口滚动。此处代码以最新评论模块为临界点,过了此临界点指定模块显现开始滚动。代码中模块的id一定要和侧边栏sidebar.php模块的id保持一致。请结合代码中的说明理解。注明:指定滚动模块整体高度不要超过浏览器视窗的高度,否者会无限向下延伸。好了,就这样吧。0

新建一个网页文档系统就会自动创建css文档和js文档,在侧边栏就能看到css文件。

1、建议新手不要使用hbuilder,这个编辑器是开发网站前台页面比较专业的集成开发环境,建议使用比较基础的editplus或者Dreamweaver等。

2、uilder 是DCloud )推出一款支持HTML5的Web开发IDE。“快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块及很多配套,HBuilder能大幅提升HTML、js、css的开发效率。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7231303.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存