“置顶显示内容在显示器缩小后只显示部分内容” 解决方案
最近的项目里有个需求,要求导航栏目置顶显示。首先想到的便是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一下,防止以后哪天用的着,自己又恰巧短路不愿意思考用。(*^__^*) 嘻嘻
我就是我,记性不好,那就用写的吧。