导航悬浮于顶部代码学习

导航悬浮于顶部代码学习，由于博客园视频限制，暂时不能全屏观看，如果想全屏观看高清视频，可以点击链接查看：http://www.zymseo.com/20.html

 jQuery页面滚动顶部悬浮导航是一款带二级下拉菜单的jQuery悬浮导航，导航可跟随页面滚动一直出现在顶部，很实用。

 

当你使用此效果装饰网页时，出现滚动条无法下拉的情况，是因为悬浮元素加入position:fixed样式之后，已经脱离布局，页面的高度不会把悬浮元素的高度计算在内．比如当前例子，浏览器的可视区域的高度为644px,内容未超过644px，浏览器将不会出现滚动条．我们将top的高度设置为44px，main的高度设置为600px ，加上导航高度，页面高度超过644px,出现滚动条，当滚动条滚动的高度超过44px时，导航脱离布局,导航悬浮，页面高度为644px，页面高度为644px，不应该出现滚动条，滚动条滚动的高度变为0,悬浮元素回归布局，页面高度又大于644px了，因为出现滚动条无法下拉的现象。

 

解决方法：我们只需给悬浮元素外包一层div,并将这个div的高度设置为悬浮元素的高度。

 

本文为博主原创所著，转载请注明出处！关注我的博客，第一时间获取最新SEO网站优化以及web前端开发信息！