发新贴  快速回复

导航滚动置顶固定 手机端上出现问题  急!!! 谢谢了

w05873
2015-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>    


 
莫涛
使用的fixed吗?
2015-01-13 14:53  回复本帖
w05873
forum.php?mod=redirect&goto=findpost&pid=34815&ptid=11333
使用的fixed吗?

恩  用的一个插件
2015-01-13 16:13  回复本帖
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>


2015-01-13 16:16  回复本帖
w05873
forum.php?mod=redirect&goto=findpost&pid=34819&ptid=11333


这个是刚刚弄的,在安卓手机上正常,在苹果机上有问题
2015-01-13 16:17  回复本帖
 
莫涛
fixed本来在手机上就有问题,建议可以考虑自定义滚动,放弃fixed
2015-01-13 17:35  回复本帖
w05873
forum.php?mod=redirect&goto=findpost&pid=34823&ptid=11333
fixed本来在手机上就有问题,建议可以考虑自定义滚动,放弃fixed

具体解决方法是?
2015-01-13 18:01  回复本帖
w05873
forum.php?mod=redirect&goto=findpost&pid=34824&ptid=11333
具体解决方法是?

希望老师尽快帮我解决一下,谢谢
2015-01-13 20:57  回复本帖
 
莫涛
移动端的视频里边有讲自定义的滚动,你找下课件
2015-01-14 10:26  回复本帖
 
莫涛
移动端的视频里边有讲自定义的滚动,你找下课件
2015-01-14 10:27  回复本帖
w05873
forum.php?mod=redirect&goto=findpost&pid=34878&ptid=11333
移动端的视频里边有讲自定义的滚动,你找下课件

如果不用自定义滚动,就想要实现该效果怎么弄?
2015-01-14 12:24  回复本帖
 
莫涛
overflow:auto,限制之后某个区域有滚动条
2015-01-15 19:44  回复本帖
w05873
forum.php?mod=redirect&goto=findpost&pid=35377&ptid=11333
overflow:auto,限制之后某个区域有滚动条

老师,不想用自定义的
2015-01-16 12:44  回复本帖
 
莫涛
js改变top值吧,不过体验很差
2015-01-16 14:24  回复本帖
w05873
forum.php?mod=redirect&goto=findpost&pid=35448&ptid=11333
js改变top值吧,不过体验很差

{:soso_e101:}  不知道怎么弄,还望老师详解, 谢谢!
2015-01-16 15:13  回复本帖
 
莫涛
onscroll的时候,让元素的top值加上scrollTop,不过元素会跳动,用户体验特别差
2015-01-16 15:14  回复本帖
w05873
forum.php?mod=redirect&goto=findpost&pid=35456&ptid=11333
onscroll的时候,让元素的top值加上scrollTop,不过元素会跳动,用户体验特别差 ...

手机端百度贴吧该效果   看起来不错  {:soso_e109:}  好难啊
2015-01-16 17:14  回复本帖
 
创美易-miaov
-webkit-overflow-scrolling:touch;
或者iscrolljs
2015-01-19 11:32  回复本帖
w05873
forum.php?mod=redirect&goto=findpost&pid=35680&ptid=11333
-webkit-overflow-scrolling:touch;
或者iscrolljs

JS基础差,iscroll.js只能一直置顶,不知道怎么让其滑动  {:soso_e101:}
2015-01-20 09:27  回复本帖
许志伟
forum.php?mod=redirect&goto=findpost&pid=34820&ptid=11333
这个是刚刚弄的,在安卓手机上正常,在苹果机上有问题

你好,你现在还有这个手机端的导航置顶的效果吗
2015-10-13 16:03  回复本帖
登录 后才可以发表回复