Posts Tagged ‘置顶

使用jQuery和css可以快速简单实现固定在页面顶端的导航区块效果,默认导航区块正常显示,当用户向下拖动滚动条时,导航区块会始终固定在页面顶端显示,保证用户一直能看到导航区块。 CSS代码: .sticky { position: fixed; width: 100%; left: 0; top: 0; z-index: 999; border-top: 0; } javascript代码: $(document).ready(function() { // grab the initial top offset of the navigation bar var stickyBarTop = $('.navbar').offset().top; // decides weather the navigation bar should have "fixed" css position or not. var stickyBar = function(){ // current vertical position from the top var scrollTop = $(window).scrollTop(); // if scrolled more than the navigation, change its position to fixed to stick to top, // otherwise chan ...