“置顶显示内容在显示器缩小后只显示部分内容” 解决方案

最近的项目里有个需求，要求导航栏目置顶显示。首先想到的便是position:fixed 属性，但是很快就发现此处有BUG；

正常显示应该为：

当窗口缩小的时候滚动条是可以滚动的，但是导航却只能显示一般并不能随着滚动条而滚动。显示如下效果。

经过各种百度，各种试验，用JS竟然解决了。原理就是监听滚动条的事件，当横向滚动条滚动的时候设置导航的left为横向滚动条的位置负值。

<script type="text/javascript">
    document.addEventListener("scroll",setPosition);
window.addEventListener("resize",setPosition);
function setPosition(){
    var scroll_Left=document.body.scrollLeft,
    nav=document.getElementById("nav_header");
    nav.style.left = ~scroll_Left + 1 + "px";
}
</script>

 时隔一年，以上代码竟然不好用了。重新调整了一下，如下（关键是好用啊T，T）

 document.addEventListener("scroll",setPosition);
        window.addEventListener("resize",setPosition);
        function setPosition() {            
            var scroll_Left = document.documentElement.scrollLeft;
            nav = document.getElementById("nav_header");
            foot = document.getElementById("foot");
            nav.style.left = ((-1) * scroll_Left) + "px";
            foot.style.left = ((-1) * scroll_Left) + "px";
        }

//////////////////////////////////////////////////////以上是在PC端的问题////////////////////////////////////////////////////////////////

顺便提一下手机端，摘抄了其他同仁的文章，原文地址：http://www.haorooms.com/post/webapp_slide_sd 

正常webapp头部高度一般为48px，这里用48px作为例子，头部下面有个固定的banner，手下滑的时候，banner会固定在浏览器最顶部不动。出现的问题是，PC端是好的，手机浏览器向上滑动的时候出现闪动！影响用户体验。

 if ($(window).scrollTop() < 48) {
                $(".nav ").css("top", 48 - parseInt($(window).scrollTop()));
            }else{
              $(".nav ").css("top", "0");  
            }
        $(window).scroll(function () {
            $(".nav ").css("top", "0");
            var toplength = parseInt($(window).scrollTop());
            if ($(window).scrollTop() < 48) {
                $(".nav ").css("top", 48 - toplength);
            }
 });

如果不想影响用户体验，最好使用的是动画效果。

if ($(window).scrollTop() < 48) {
            $(".nav ").stop().animate({"top":48 - parseInt($(window).scrollTop())},"fast");
        } else {
            $(".nav ").stop().animate({"top": "0"},"fast");
        }
$(window).scroll(function () {
            var toplength = parseInt($(window).scrollTop());
            if ($(window).scrollTop() < 48) {
                $(".nav ").stop().animate({"top": 48 - toplength},"fast");
            }else{
            $(".nav ").stop().animate({"top": "0"},"fast"); 
            }
});

也可以在开始的时候不做置顶操作，当要固定的div的offset比scrolltop小的时候，再让其固定。

menuPosition: function() {
            var m = $(window).scrollTop(), 
            n = $("#idmenuinfo的父亲").offset().top,
            l = $("#menuinfo");
            if (m >= n) {
                if (!l.hasClass("menuinfo")) {
                    l.addClass("menuinfo")
                }
            } else {
                l.removeClass("menuinfo")
            }
        }

menuinfo样式如下：

.menuinfo {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

手机端的本人没做过验证，只作为记录mark一下，防止以后哪天用的着，自己又恰巧短路不愿意思考用。(*^__^*) 嘻嘻