JQ+css3 导航栏到底部上移
程序员文章站
2022-03-09 21:45:27
导航栏 JQ代码 ......
导航栏
.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' }); } });
下一篇: 操作DOM