导航滚动置顶固定 手机端上出现问题 急！！！ 谢谢了
w058732015-01-13 12:03
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>聚好玩</title>
<!--Mobile specific meta goodness :)-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="css/miqu.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smint.js"></script>
</head>
<body>
<div class="wrapper">
<img class="img" src="img/bg.jpg">
<div class="tab">
<center>
<ul>
<li id="detail"><a class="cur_detail" href="#">详情</a></li>
<li id="info"><a class="info" href="#">信息</a></li>
</ul>
</center>
<em class="line"></em>
<div class="arrowLeft"></div>
<div class="arrowRight" style="display:none;"></div>
</div>
<div class="content">
<div class="brief">
<div class="briefCont" style=" background:pink; height:1000px;"></div>
</div>
<div class="infoCont" style=" background:green; height:1000px;"> </div>
</div>
</div>
</body>
</html>
/*********js部分****************/
<script type="text/javascript" src="js/stickUp.min.js"></script>
<script type="text/javascript">
//initiating jQuery
jQuery(function($) {
$(document).ready( function() {
$('.tab').stickUp();
});
});
//initializing jQuery
jQuery(function($) {
$(document).ready( function() {
$('.tab').stickUp({
marginTop: 'auto'
});
});
});
$(function() {
var isIOS = (/iphone|ipad|ipod/gi).test(navigator.appVersion);
if (isIOS) {
$('.wrapper').on('focus', 'input', function () {
$('.tab').addClass('pos-rel');
}).on('focusout', 'input', function () {
$('.tab').removeClass('pos-rel');
});
}
$(".tab").css("position", "static");
});
</script>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>聚好玩</title>
<!--Mobile specific meta goodness :)-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta content="telephone=no" name="format-detection" />
<link rel="stylesheet" href="css/miqu.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smint.js"></script>
</head>
<body>
<div class="wrapper">
<img class="img" src="img/bg.jpg">
<div class="tab">
<center>
<ul>
<li id="detail"><a class="cur_detail" href="#">详情</a></li>
<li id="info"><a class="info" href="#">信息</a></li>
</ul>
</center>
<em class="line"></em>
<div class="arrowLeft"></div>
<div class="arrowRight" style="display:none;"></div>
</div>
<div class="content">
<div class="brief">
<div class="briefCont" style=" background:pink; height:1000px;"></div>
</div>
<div class="infoCont" style=" background:green; height:1000px;"> </div>
</div>
</div>
</body>
</html>
/*********js部分****************/
<script type="text/javascript" src="js/stickUp.min.js"></script>
<script type="text/javascript">
//initiating jQuery
jQuery(function($) {
$(document).ready( function() {
$('.tab').stickUp();
});
});
//initializing jQuery
jQuery(function($) {
$(document).ready( function() {
$('.tab').stickUp({
marginTop: 'auto'
});
});
});
$(function() {
var isIOS = (/iphone|ipad|ipod/gi).test(navigator.appVersion);
if (isIOS) {
$('.wrapper').on('focus', 'input', function () {
$('.tab').addClass('pos-rel');
}).on('focusout', 'input', function () {
$('.tab').removeClass('pos-rel');
});
}
$(".tab").css("position", "static");
});
</script>
0
0
w05873
forum.php?mod=redirect&goto=findpost&pid=34815&ptid=11333
使用的fixed吗？
恩 用的一个插件
使用的fixed吗？
恩 用的一个插件
2015-01-13 16:13
回复本帖
0
w05873
forum.php?mod=redirect&goto=findpost&pid=34818&ptid=11333
恩 用的一个插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jq_nav_gd.js"></script>
</head>
<body style="margin:0px;">
<div style="height:300px;background:#e0e0e0">
这里放你的那个图片
</div>
<div id="fixedMenu_keleyi_com" style="background:#ffffff;width:100%; height:50px;">
这里面放你的导航条
</div>
<div style="height:2600px;background:#999">
<p>这里面放你的正文内容</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>这里面放你的正文内容</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>这里面放你的正文内容</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>这里面放你的正文内容</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>这里面放你的正文内容</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>这里面放你的正文内容</p>
</div>
<script type="text/javascript">
$(function () {
var ie6 = document.all;
var dv = $('#fixedMenu_keleyi_com'), st;
dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (st > parseInt(dv.attr('otop'))) {
if (ie6) {//IE6不支持fixed属性，所以只能靠设置position为absolute和top实现此效果
dv.css({ position: 'absolute', top: st });
}
else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
});
});
</script>
</body>
</html>
恩 用的一个插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jq_nav_gd.js"></script>
</head>
<body style="margin:0px;">
<div style="height:300px;background:#e0e0e0">
这里放你的那个图片
</div>
<div id="fixedMenu_keleyi_com" style="background:#ffffff;width:100%; height:50px;">
这里面放你的导航条
</div>
<div style="height:2600px;background:#999">
<p>这里面放你的正文内容</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>这里面放你的正文内容</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>这里面放你的正文内容</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>这里面放你的正文内容</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>这里面放你的正文内容</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>这里面放你的正文内容</p>
</div>
<script type="text/javascript">
$(function () {
var ie6 = document.all;
var dv = $('#fixedMenu_keleyi_com'), st;
dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (st > parseInt(dv.attr('otop'))) {
if (ie6) {//IE6不支持fixed属性，所以只能靠设置position为absolute和top实现此效果
dv.css({ position: 'absolute', top: st });
}
else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
});
});
</script>
</body>
</html>
2015-01-13 16:16
回复本帖
0
w05873
forum.php?mod=redirect&goto=findpost&pid=34819&ptid=11333
这个是刚刚弄的，在安卓手机上正常，在苹果机上有问题
这个是刚刚弄的，在安卓手机上正常，在苹果机上有问题
2015-01-13 16:17
回复本帖
0
0
w05873
forum.php?mod=redirect&goto=findpost&pid=34823&ptid=11333
fixed本来在手机上就有问题，建议可以考虑自定义滚动，放弃fixed
具体解决方法是？
fixed本来在手机上就有问题，建议可以考虑自定义滚动，放弃fixed
具体解决方法是？
2015-01-13 18:01
回复本帖
0
w05873
forum.php?mod=redirect&goto=findpost&pid=34824&ptid=11333
具体解决方法是？
希望老师尽快帮我解决一下，谢谢
具体解决方法是？
希望老师尽快帮我解决一下，谢谢
2015-01-13 20:57
回复本帖
0
0
0
w05873
forum.php?mod=redirect&goto=findpost&pid=34878&ptid=11333
移动端的视频里边有讲自定义的滚动，你找下课件
如果不用自定义滚动，就想要实现该效果怎么弄？
移动端的视频里边有讲自定义的滚动，你找下课件
如果不用自定义滚动，就想要实现该效果怎么弄？
2015-01-14 12:24
回复本帖
0
0
w05873
forum.php?mod=redirect&goto=findpost&pid=35377&ptid=11333
overflow:auto,限制之后某个区域有滚动条
老师，不想用自定义的
overflow:auto,限制之后某个区域有滚动条
老师，不想用自定义的
2015-01-16 12:44
回复本帖
0
0
w05873
forum.php?mod=redirect&goto=findpost&pid=35448&ptid=11333
js改变top值吧，不过体验很差
{:soso_e101:} 不知道怎么弄，还望老师详解， 谢谢！
js改变top值吧，不过体验很差
{:soso_e101:} 不知道怎么弄，还望老师详解， 谢谢！
2015-01-16 15:13
回复本帖
0
0
w05873
forum.php?mod=redirect&goto=findpost&pid=35456&ptid=11333
onscroll的时候，让元素的top值加上scrollTop，不过元素会跳动，用户体验特别差 ...
手机端百度贴吧该效果 看起来不错 {:soso_e109:} 好难啊
onscroll的时候，让元素的top值加上scrollTop，不过元素会跳动，用户体验特别差 ...
手机端百度贴吧该效果 看起来不错 {:soso_e109:} 好难啊
2015-01-16 17:14
回复本帖
0
0
w05873
forum.php?mod=redirect&goto=findpost&pid=35680&ptid=11333
-webkit-overflow-scrolling:touch;
或者iscrolljs
JS基础差，iscroll.js只能一直置顶，不知道怎么让其滑动 {:soso_e101:}
-webkit-overflow-scrolling:touch;
或者iscrolljs
JS基础差，iscroll.js只能一直置顶，不知道怎么让其滑动 {:soso_e101:}
2015-01-20 09:27
回复本帖
0
许志伟
forum.php?mod=redirect&goto=findpost&pid=34820&ptid=11333
这个是刚刚弄的，在安卓手机上正常，在苹果机上有问题
你好，你现在还有这个手机端的导航置顶的效果吗
这个是刚刚弄的，在安卓手机上正常，在苹果机上有问题
你好，你现在还有这个手机端的导航置顶的效果吗
2015-10-13 16:03
回复本帖
0
子木儿
莫涛 2015-01-13 17:35发表的内容:
fixed本来在手机上就有问题，建议可以考虑自定义滚动，放弃fixed
我想知道，fixed在手机上哪块有问题呢？ 因为我平时一般都用fixed，还没遇到过呢，
2018-01-20 10:18
回复本帖
0
登录
后才可以发表回复
