页面滚动时出现固定导航

页面滚动时出现固定导航的效果,参考页面有http://v.thea.cn/course/info_358和v.thea.cn.

参考代码如下:

<div class="tab-title" style="position: static; top: 0px;"><span class="normal selected">课程介绍</span><span class="normal">课程大纲</span><span class="normal">课程评论</span>
<span style="display: none;" class="spa-try-listen "><a target="_blank" href="/play/358_3018">免费试听</a></span>
<span "="" style="display: none;" class="normal"><a href="/Cart/addCart/courseid/358/coursetype/0/wx/thea">购买课程</a></span><!-- /pay/course_358 --> </div>

js如下:

$(window).scroll(function(){
		var scroll_offset = $(".pcd_main .tab").offset().top;
		var t = document.documentElement.scrollTop || document.body.scrollTop;
		//var $tabtitle=$(".pcd_main .tab-title");
		//var $liLast=$tabtitle.children("span").last();
		if(t>scroll_offset){
			$tabtitle.css({"position":"fixed","top":"0"});
			//$liLast.removeClass("last");
			//$tabtitle.find(".spa-try-listen").show().next().show();
		}else{
			$tabtitle.css("position","static");
			//$liLast.removeClass("last");
			//$tabtitle.find(".spa-try-listen").hide().next().hide();
		}
	});
时间: 2024-11-07 15:11:37

页面滚动时出现固定导航的相关文章

Javascript实现页面滚动时导航智能定位

遇到的问题: 在做官网的时候,需要滚动定位的区块的图片不确定,无法确定用户浏览区域对应的模块导航 之前的解决方案是: 通过定位滚动条的位置来判断用户浏览区域对应的模块导航,这种方法的弊端是,区块的高度不确定时就无法计算滚动条的位置来判断: 优化方案: 页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域. 以下是DEMO <!-- html --><div class="container">

Javascript页面滚动时导航智能定位

常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域. 假设结构如下: <div class="container"> <div class="wrapper"> <div class="section" id="section1">section1</div> <di

js页面滚动时层智能浮动定位实现:

案例展示: 第一个:每个人都有看过的淘宝页面: 案例就不多说了,有兴趣的可以多去找找, 这样的智能浮动效果还是不错的,挺方便. 基本的实现原理: 首先有一个默认状态就是没有滚动的时候,什么事情也不用做,定位可以是absolute,也可以是stati,fixed,relartive 这些都可以.我们主要需要关注的是当浏览器滚动的时候,(要浮动的块)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了.最好的position属性就是fixed了,可以在IE6+和其

div随页面滚动遇顶固定的两种方法(js&amp;jQuery)

一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫"层的智能浮动效果".目前我们在国内的商业网站上就常常看到这样的效果了.例如淘宝网的搜索结果页的排序水平条,在默认状态时,该工具条是跟随页面滚动的,如下图: 而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当我们下拉屏

jQuery实现页面滚动时智能浮动定位

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>jQuery实现页面滚动时层智能浮动定位_前端开发</title>    <style type="text/css">        * { 

WOW.js和animate.css让页面滚动时显示动画

官网:http://mynameismatthieu.com/WOW/ bootstrap CDN服务:http://www.bootcdn.cn/wow/ 1.wow.js 实现了在网页滚动时的动画效果,有漂亮的动画效果,依赖于Animate.css. 2.Animate.css (下载https://daneden.github.io/animate.css/)非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画 使用方法 1.引入文件<link rel="stylesheet

基于jQuery实现页面滚动时顶部导航显示隐藏效果

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <link rel=&quo

HTML滚动时位置固定

现在显示器一般都是宽屏,网页两端常常会留白. 两边可能会放一些推荐.标签或是导航什么的辅助模块. 现在有的网站页面内容过长时,用户将滚动条向下拉时,拉到一定程度,左右两侧的辅助模块就会固定在指定位置,不随滚动条滚动.这个的体验很好. 试着自己写了一个. 原理很简单,就是使用JS计算当滚动条位置大于元素显示位置时,将元素设置为 position:fixed; 设置好top,left这样就固定好位置了. <!DOCTYPE html> <html> <head> <t

UIScrollView滚动时隐藏底部导航栏问题

- (void)scrollViewDidScroll:(UIScrollView *)scrollView { NSLog(@"開始滚动"); int currentPostion = scrollView.contentOffset.y; if (currentPostion - _lastPosition > 20  && currentPostion >0) { _lastPosition = currentPostion; NSLog(@"