bootstrap固定底部导航⾃适应
在使⽤bootstrap 底部导航的时候遇到了⼀个问题 —— 当我的内容超过⼀屏的时候,底部的部分内容会被固定的导航内容遮盖⾃⼰写了⼀个JS脚本,解决⾃适应的问题
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid margin_bottom_5 margin_top_5 clear_padding text-center">
<button class="btn btn-e4005a" type="button" >提交</button>
</div>
</nav>
<script>
$(function(){
autoNav();
});
//解决底部⾃动导航的问题
function autoNav(){网站底部代码js特效
//获取内容的⾼度
var bodyHeight = $("body").height();
//获取底部导航的⾼度
var navHeight = $(".navbar").height();
//获取显⽰屏的⾼度
var iHeight = document.documentElement.clientHeight||document.body.clientHeight;
//如果内容的⾼度⼤于(窗⼝的⾼度 - 导航的⾼度),z则需要添加⼀个div,设置其⾼度
if(bodyHeight > (iHeight - navHeight)){
$("body").append('<div ></div>');
}
}
</script>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论