本篇文章分享给大家的内容是关于jquery和css3 如何实现航栏到底部上移(代码),内容很详细,接下来我们就来看看具体的内容,希望可以帮助到有需要的朋友。
导航栏
.navigation { position: fixed; bottom: 100px; right: 100px; z-index: 100;}.navigation { transition: bottom 2s; -webkit-transition: bottom 2s;}
jq代码
var nav = eval($('.navigation').offset().top - $(window).scrolltop());$(window).on('scroll', function() { var navh = $('.navigation').height(); var foot = parseint($('.footer').offset().top - $(this).scrolltop() - navh); /*console.log(nav - foot);*/ if(nav == foot || nav > foot) { $('.navigation').css({ 'position': 'fixed', 'bottom': '400px' }); } else { $('.navigation').css({ 'position': 'fixed', 'bottom': '100px' }); }});
相关推荐:
css sprite如何实现图像拼合技术
如何用css和js移动端分别判断手机横竖屏的状态
以上就是jquery和css3 如何实现航栏到底部上移(代码)的详细内容。